微信 小程序组件 滑动导航和获取元素实际高度

 

 

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

})

},

转载于:https://www.cnblogs.com/dianzan/p/8308460.html