我们在做微信小程序时,应该很大可能会用上这种导航栏!
直接看效果图:
点击tab 可自由实现滑动,下面来看看我的实现方法!
wxml:
<scroll-view class="za" scroll-into-view="{{ztoView}}" scroll-x="true" scroll-with-animation="true">
<view class="zb" wx:for="{{zlist}}" wx:key="index" id="{{'list' + index}}" data-zid="{{ index }}" catchtap="ztab">
{{item}}
</view>
</scroll-view>
知识点1:
scroll-into-view 属性是滑动到某个id上,scroll-into-view="{{ztoView}}",意思就是滑动到id为 {{ztoView}} 的子元素。
scroll-with-animation=“true”, 该属性是支持过渡效果。
js:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
ztoView: '',
zlist: ["首页", "农业", "飞机", "电脑","首页2", "农业2", "飞机2", "电脑2"]
},
ztab: function(e){
let zid = e.currentTarget.dataset.zid;
console.log(zid);
zid = zid - 2; // 判断当点击后面的几个才触发往后滑 往回滑的判断,zid-
if (zid < -1) {
zid = -1
}
let zidstr = 'list' + zid;
this.setData({
ztoView: zidstr
})
}
})
知识点2:
判断 zid ,来触发点击,是否需要滑动。
zid = zid - 2; // 判断当点击后面的几个才触发往后滑 往回滑的判断,zid-
if (zid < -1) {
zid = -1
}
wxss:
page{
height: 100%;
}
.za{
height: 80rpx;
line-height: 80rpx;
width: 750rpx;
white-space: nowrap;
background-color: aqua;
}
.zb{
display: inline-block;
padding: 0 11px;
margin-left: 20rpx;
background-color: #0094ff;
}