
<view> <scroll-view scroll-x scroll-with-animation scroll-left="{{menuIndex}}" style="height: 100px; width:100%;"> <view id='#haha' class='all' style='width:{{menuWidth}}px;'> <block wx:key="lists" wx:for="{{lists}}"> <view id="a{{index}}" bindtap='jumpIndex' class='menu' data-menuindex='{{index}}'>{{item.list}}</view> </block> </view> </scroll-view> </view>
data: { // 初始化滑动条数据 menuIndex:0, // 每个菜单的宽度 onlyWidth: 70, // 右侧的margin marginWidth:10, // 菜单总长 menuWidth:0,
lists:[ { list: 'a1' }, { list: 'a2' }, { list: 'a3' }, { list: 'a4' }, { list: 'a5' }, { list: 'a6' }, { list: 'a7' } ], },
jumpIndex:function(e){ var menuIndex = (e.currentTarget.dataset.menuindex-1)*80; this.setData( {menuIndex:menuIndex} ) },
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) {
let that=this; let lists = this.data.lists; let onlyWidth=this.data.onlyWidth; let marginWidth=this.data.marginWidth; let menuWidth = lists.length * (onlyWidth + marginWidth) - marginWidth; that.setData({ menuWidth: menuWidth }) // 获取用户高度 let query = wx.createSelectorQuery(); query.select('#a0').boundingClientRect() query.exec(function (res) { console.log(res); })
},
|