博客

<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);

})

},