小程式商品展示需要導航欄的商品分類進行滑動

效果圖：

首先是滑動的效果：

    <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;">
  </scroll-view>

 小程式使用</scroll-view>,橫向移動即可

WXML:這裡面我將導航欄顯示類目定義為5個，每個20%,當超出5個分類，也就是index>4的時候，導航欄下面的省略號加上（因為tab-nac的border-bottom只能顯示到第五個分類）

  <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;">
    <!-- tab -->
    <view class="tab">
      <view class="tab-nav" style='font-size:12px'>
        <view  wx:for="{{tabnav.tabitem}}" bindtap="setTab"  data-tabindex="{{index}}" style="min-width:20%;max-width:20%;text-align:center;height: 80rpx;
{{index>4?'border-bottom: 1rpx dotted #ddd;':''}}">{{item.text}}</view>
        <view >
        <view class="tab-line" style="width:{{100/tabnav.tabnum}}%;transform:translateX({{100*showtab}}%);"></view>
        </view>
      </view>
    </view>
  </scroll-view>
 

wXSS:

.tab{
	display: flex;
	flex-direction: column;
}
.tab-nav{
	height: 80rpx;
	background: #fff;
	border-bottom: 0.5rpx dotted #ddd;
	display: flex;
	line-height: 79rpx;
	position: relative;
}

.tab-line{
	position: absolute;
	left: 0;
	bottom: -1rpx;
	height: 4rpx;
	background: #f7982a;
	transition: all 0.3s;
}
.tab-content{
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
}
 

JS：

import util from './../../utils/util.js';
Page({
  data: {
    showtab: 0,  //頂部選項卡索引
    tabnav: {
      tabnum: 5,
      tabitem: [
        {
          "id": 0,
          "text": "商品分類1"
        },
        {
          "id": 1,
          "text": "商品分類2"
        },
        {
          "id": 2,
          "text": "商品分類3"
        },
        {
          "id": 3,
          "text": "商品分類4"
        },
        {
          "id": 4,
          "text": "商品分類5"
        },
        {
          "id": 5,
          "text": "商品分類6"
        },
        {
          "id": 6,
          "text": "商品分類7"
        }
      ]
    },
    productList: [],
  },
  onLoad: function () {
  },
  setTab: function (e) {
    const edata = e.currentTarget.dataset;
    this.setData({
      showtab: edata.tabindex,
      
    })
  },
})
 

更多文章請關注公眾號：每天學Java。想獲得更多最新面試提醒請進入小程式：每天學Java

 公眾號二維碼：                                                                                          小程式二維碼：