ec.uniapp-master/components/index-nav/index-nav仿天美.vue

<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>