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);
})
},
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。