微信小程序組件滑動(dòng)導航和(hé)獲取元素實際高度 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

微信小程序組件滑動(dòng)導航和(hé)獲取元素實際高度

發表時間:2021-3-31

發布人:葵宇科技

浏覽次數:60


  1. <view>
  2. <scroll-view scroll-x scroll-with-animation scroll-left="{{menuIndex}}" style="height: 100px; width:100%;">
  3. <view id='#haha' class='all' style='width:{{menuWidth}}px;'>
  4. <block wx:key="lists" wx:for="{{lists}}">
  5. <view id="a{{index}}" bindtap='jumpIndex' class='menu' data-menuindex='{{index}}'>{{item.list}}</view>
  6. </block>
  7. </view>
  8. </scroll-view>
  9. </view>
  1. data: {
  2. // 初始化滑動(dòng)條數據
  3. menuIndex:0,
  4. // 每個(gè)菜單的寬度
  5. onlyWidth: 70,
  6. // 右側的margin
  7. marginWidth:10,
  8. // 菜單總長
  9. menuWidth:0,
  1. lists:[
  2. { list: 'a1' },
  3. { list: 'a2' },
  4. { list: 'a3' },
  5. { list: 'a4' },
  6. { list: 'a5' },
  7. { list: 'a6' },
  8. { list: 'a7' }
  9. ],
  10. },
  11. jumpIndex:function(e){
  12. var menuIndex = (e.currentTarget.dataset.menuindex-1)*80;
  13. this.setData(
  14. {menuIndex:menuIndex}
  15. )
  16. },
  1. /**
  2. * 生命周期函數--監聽頁面加載
  3. */
  4. onLoad: function (options) {
  5. let that=this;
  6. let lists = this.data.lists;
  7. let onlyWidth=this.data.onlyWidth;
  8. let marginWidth=this.data.marginWidth;
  9. let menuWidth = lists.length * (onlyWidth + marginWidth) - marginWidth;
  10. that.setData({
  11. menuWidth: menuWidth
  12. })
  13. // 獲取用戶高度
  14. let query = wx.createSelectorQuery();
  15. query.select('#a0').boundingClientRect()
  16. query.exec(function (res) {
  17. console.log(res);
  18. })
  19. },

相關(guān)案例查看更多