<scroll-view scroll-x class="scroll-x" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}" bindscroll="scrollchange">
scrollchange: function(event){
this.setData({
scrollLeft: event.detail.scrollLeft
});
console.dir(event.detail.scrollLeft);
},
centerTap: function (event) {
//点击的偏移量
// console.log(event);
var cur = event.detail.x + this.data.scrollLeft;
// console.log(cur);
// console.log(wx.getSystemInfoSync().windowWidth);
//每个tab选项宽度占15%
var singleNavWidth = wx.getSystemInfoSync().windowWidth * 16 / 100;
// console.log(singleNavWidth);
this.setData({
clickNumber: parseInt(cur / singleNavWidth)
})
微信小程序利用scroll-view和swiper实现标签页小程序实现一个联动的效果,具体效果看图。 上方是一个可滚动的标签栏。下面也是可以滚动的内容区。点击上方标签栏,下方内容跟着切换到响应的界面。下面滚动时候,上面的标签栏也跟随切...