viewscroll-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="{{li ...
|
-
<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);
-
})
-
-
},
|
|
