ios 顶部tab滑动实现_微信小程序顶部导航栏滑动tab效果

小程序商品展示需要导航栏的商品分类进行滑动，供大家参考，具体内容如下

效果图：

首先是滑动的效果：

小程序使用,横向移动即可

wxml:这里面我将导航栏显示类目定义为5个，每个20%,当超出5个分类，也就是index>4的时候，导航栏下面的省略号加上(因为tab-nac的border-bottom只能显示到第五个分类)

{{item.text}}

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,

})

},

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！