邓平艺
4 years ago
4 changed files with 192 additions and 114 deletions
-
11components/index-nav/index-nav.less
-
115components/index-nav/index-nav.vue
-
40components/index-nav/index-nav仿天美.less
-
140components/index-nav/index-nav仿天美.vue
@ -0,0 +1,40 @@ |
|||
.quick-nav{ |
|||
background-color: #FFFFFF; |
|||
margin-top: 20rpx; |
|||
.nav-content{ |
|||
display: flex; |
|||
align-items: center; |
|||
flex-wrap:wrap; |
|||
padding: 10px 0 0 0; |
|||
// width: 890rpx; |
|||
// width: 1000rpx; |
|||
|
|||
width: 1100rpx; |
|||
.nav-item{ |
|||
padding:0px 0px 10px 0px; |
|||
// width: 25%; |
|||
// width: 13.8%; |
|||
width: 12.5%; |
|||
|
|||
// width: 68.97px; |
|||
// height: 73px; |
|||
text-align: center; |
|||
.top-info{ |
|||
image{ |
|||
width: 40px; |
|||
height: 40px; |
|||
//border-radius: 50%; |
|||
} |
|||
} |
|||
.bottom-info{ |
|||
padding-top: 5px; |
|||
color: #000000; |
|||
font-size: 12px; |
|||
line-height: 18px; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,140 @@ |
|||
<template> |
|||
<!--快捷导航--> |
|||
<view class="quick-nav" :style="'margin-bottom: ' + meta.margin_bottom + 'px'"> |
|||
<scroll-view :scroll-x="true" class="scroll-view" @scroll="scroll"> |
|||
<view class="nav-content"> |
|||
<view class="nav-item" v-for="(item, index) in navData" :key="index" @tap="_jumpImg" :data-src="item.link"> |
|||
<view class="top-info"> |
|||
<image :src="item.image"></image> |
|||
</view> |
|||
<view class="bottom-info">{{item.name}}</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="indicator"> |
|||
<view class="percentage" :style="{width: per_width +'%'}"></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [{ |
|||
link: '/pages/index/category/category?current=0&type=0', |
|||
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png', |
|||
name: '面部护肤' |
|||
},{ |
|||
link: '/pages/index/category/category?current=0&type=3', |
|||
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png', |
|||
name: '国际精品' |
|||
},{ |
|||
link: '/pages/point/shoppingMall/shoppingMall', |
|||
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png', |
|||
name: '积分商城' |
|||
},{ |
|||
link: '/pages/index/category/category?current=0&type=4', |
|||
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png', |
|||
name: '服装内衣' |
|||
},{ |
|||
link: '/pages/index/category/category?current=0&type=6', |
|||
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png', |
|||
name: '数码家电' |
|||
},{ |
|||
link: '/pages/index/onlineMall/onlineMall?id=6', |
|||
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png', |
|||
name: '黄金珠宝' |
|||
},{ |
|||
link: '/pages/user/member/service', |
|||
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png', |
|||
name: '会员服务' |
|||
},{ |
|||
link: '/pages/index/activity/hot', |
|||
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png', |
|||
name: '活动报名' |
|||
},{ |
|||
link: '/pages/index/cateringFacilities/cateringFacilities', |
|||
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png', |
|||
name: '餐饮配套' |
|||
},{ |
|||
link: '/pages/index/collectCoupons/collectCoupons', |
|||
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png', |
|||
name: '领券中心' |
|||
},{ |
|||
link: '/pages/user/my/chatonline', |
|||
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png', |
|||
name: '在线客服' |
|||
},{ |
|||
link: '/pages/index/category/category?current=0&type=7', |
|||
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png', |
|||
name: '鞋履箱包' |
|||
},{ |
|||
link: '/pages/index/category/category?current=0&type=8', |
|||
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png', |
|||
name: '滋补保健' |
|||
}], |
|||
per_width: 14.285 * 5 |
|||
}; |
|||
}, |
|||
|
|||
props: { |
|||
navData: { |
|||
type: Array, |
|||
value: '' |
|||
}, |
|||
meta: { |
|||
type: Object, |
|||
value: "" |
|||
} |
|||
}, |
|||
mounted(){ |
|||
|
|||
}, |
|||
//组件的方法 |
|||
methods: { |
|||
_jumpImg(e) { |
|||
var src = e.currentTarget.dataset.src; |
|||
if (!src || src == 'uto_miniprogram') return this.$msg('敬请期待'); |
|||
wx.navigateTo({ |
|||
url: src |
|||
}); |
|||
}, |
|||
scroll(event){ |
|||
// todo 计算优化 |
|||
if(event.detail.scrollLeft < 112){ |
|||
this.per_width = 14.285 * 5; |
|||
}else{ |
|||
this.per_width = 0.636 * event.detail.scrollLeft; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
}; |
|||
</script> |
|||
<style rel="stylesheet/less" lang="less"> |
|||
@import "index-nav"; |
|||
.scroll-view{ |
|||
width: 750rpx; |
|||
height: max-content; |
|||
padding: 0 32rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.indicator{ |
|||
width: 100rpx; |
|||
height: 10rpx; |
|||
background-color: #e0e0e0; |
|||
margin: 0 auto; |
|||
border-radius: 20rpx; |
|||
position: relative; |
|||
overflow: hidden; |
|||
.percentage{ |
|||
height: 10rpx; |
|||
background-color: #186c6b; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
border-radius: 20rpx; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue