root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

11

master
tianyi 2 weeks ago
parent
1e9fee9805
commit
5de6699e1b
1 changed files with 275 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 277
      components/tab-bar/postList.vue

277
components/tab-bar/postList.vue
View File

@ -1,15 +1,63 @@
<template> <template>
<!-- 鱼塘 --> <!-- 鱼塘 -->
<view class="page1"> <view class="page1">
<view class="tab-mask" v-if="showMoreTab == true"></view>
<view class="title"> <view class="title">
<view class="title-sreach"> <view class="title-sreach" :style="{'margin-top': menuButtonInfo.top +'px'}">
<uni-icons type="search"></uni-icons> <uni-icons type="search"></uni-icons>
<input type="text" placeholder="搜索" /> <input type="text" placeholder="搜索"
<view class=""> style="flex:1;line-height: 33px;height: 33px;width: 70%;padding: 0 10px;" />
<view class="sreach-btn">
搜索 搜索
</view> </view>
</view> </view>
</view> </view>
<view class="nav-tab">
<view class="tab-box">
<view @tap="checkTab(index)" class="tab1" v-for="(item,index) in tabList" :key="index">
<view class="" style=""
:style="{'font-size':tabIndex == index?'14px':'12px','font-weight':tabIndex == index?'700':'400'}">
{{item.name}}
</view>
<view class="black-line" v-if="tabIndex == index"></view>
</view>
<view class="down-tab" @tap="showMoreTab = true">
<uni-icons type="down"></uni-icons>
</view>
</view>
<view class="up-tab" v-if="showMoreTab == true">
<view>
<view
style="height: 25px;line-height: 25px;width: 100%;padding-left: 12px;font-size: 14px;font-weight: 700;">
更多分类
<text style="font-size: 12px;color: rgba(0, 35, 28, 0.5);">
点击进入分类
</text>
</view>
<view class="down-tab" @tap="showMoreTab = false">
<uni-icons type="down"></uni-icons>
</view>
</view>
<view class="tanchu-tab">
<view class="tanchu1" v-for="(item,index) in tabList" :key="index"
:style="{'background':tabIndex == index?'rgba(0, 35, 28, 1)':'#fff','color':tabIndex == index?'rgba(166, 255, 234, 1)':''}">
{{item.name}}
</view>
</view>
</view>
</view>
<view class="shop-list">
<view class="shop1" v-for="(item,index) in shopList" :key="index">
<img :src="item.img" alt="" />
<view class="shop-name">
{{item.shopName | sliceMsg}}
</view>
</view>
</view>
<view class="huodong">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/bc6b887514a5469a938cdd0001e841c2.png" alt="" style="margin-right: 5px;" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/90a37f3f8a204d7eaa8ea2d3293e1086.png" alt="" style="margin-left: 5px;" />
</view>
</view> </view>
</template> </template>
@ -17,10 +65,85 @@
export default { export default {
data() { data() {
return { return {
shopList: [{
shopName: '高徒课堂',
img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
}, {
shopName: '赵一鸣',
img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
}, {
shopName: '蜜雪冰城',
img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
}, {
shopName: '怂柠',
img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
}, {
shopName: '麻辣烫酸辣粉',
img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
}, {
shopName: '鲸鱼AI教育',
img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
}],
showMoreTab: false,
tabIndex: 0,
tabList: [{
name: '兼职',
index: 0
}, {
name: '广告',
index: 1
}, {
name: '活动',
index: 2
}, {
name: '美妆个护',
index: 3
}, {
name: '考学职称',
index: 4
}, {
name: '技能服务',
index: 5
}, {
name: '省钱神券',
index: 6
}, {
name: '推荐',
index: 7
}, {
name: '摄影',
index: 8
}, {
name: '吃饭',
index: 8
}, {
name: '电影',
index: 8
}, {
name: '唱歌',
index: 8
}, {
name: '美妆个护',
index: 8
}, {
name: '考学职称',
index: 8
}, {
name: '技能服务',
index: 8
}, {
name: '二手旧物',
index: 8
}],
menuButtonInfo: {} menuButtonInfo: {}
} }
}, },
props:{ filters:{
sliceMsg(val) {
return val.slice(0, 4);
}
},
props: {
}, },
watch: { watch: {
@ -39,14 +162,17 @@
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.$forceUpdate() this.$forceUpdate()
}, },
getShopList(){ checkTab(index) {
this.tabIndex = index
},
getShopList() {
} }
} }
} }
</script> </script>
<style> <style lang="scss">
page { page {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -67,13 +193,146 @@
.title { .title {
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/25cad6ddbfb44230abf0c4d1a6259e16.png') no-repeat; background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/25cad6ddbfb44230abf0c4d1a6259e16.png') no-repeat;
width: 100%; width: 100%;
height: 190px; height: 100px;
background-size: 100%;
} }
.title-sreach { .title-sreach {
width: 100%; width: 70%;
display: flex;
height: 66rpx;
line-height: 66rpx;
display: flex;
background: #fff;
border-radius: 66rpx;
padding-left: 10px;
margin-left: 10px;
}
.sreach-btn {
width: 50px;
height: 25px;
line-height: 25px;
background: rgba(0, 35, 28, 1);
color: rgba(166, 255, 234, 1);
border-radius: 30px;
text-align: center;
margin: 4px;
}
.tab-box {
display: flex; display: flex;
height: 200rpx; height: 30px;
line-height: 20px;
padding-left: 12px;
width: 100%;
overflow: scroll;
white-space: nowrap;
position: relative;
}
.tab1 {
margin-right: 18px;
}
.nav-tab {
position: relative; position: relative;
} }
.black-line {
width: 25px;
height: 3px;
background: #000;
border-radius: 3px;
margin: 0 auto;
}
.down-tab {
position: absolute;
top: 0;
right: 0;
background: #fff;
width: 55px;
height: 20px;
text-align: right;
line-height: 20px;
padding-right: 7px;
background: linear-gradient(to right, transparent 0%, #ffffff 60%, #ffffff 100%);
}
.up-tab {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
z-index: 99;
background: #F5F8F5;
}
.tab-mask {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 100px;
left: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 97;
}
.tanchu-tab {
display: flex;
flex-wrap: wrap;
}
.tanchu1 {
width: 80px;
height: 30px;
background: #fff;
border-radius: 10px;
text-align: center;
margin: 10px 0 0 10px;
line-height: 30px;
font-size: 13px;
}
.shop-list {
display: flex;
white-space: nowrap;
width: 100%;
padding: 0 12px;
overflow: scroll;
margin-top: 15px;
}
.shop1 {
height: 70px;
width: 50px;
text-align: center;
margin-right: 18px;
img {
width: 50px;
height: 50px;
border-radius: 50px;
}
}
.shop-name {
height: 20px;
line-height: 20px;
font-weight: 600;
}
.huodong{
padding: 0 12px;
display: flex;
height: 85px;
margin-top: 12px;
img{
height: 85px;
flex: 1;
}
}
</style> </style>
Write Preview
Loading…
Cancel
Save