小程序頁面獲取滾動條高度
阿新 • • 發佈:2018-04-16
esc -c 效果 情況 this 視圖 適應 頂部 頁面
沒有用過vue等MVVM的框架,直接開始做小程序,沒有dom操作真是各種不適應,思維有時都轉換不過來
想要做的效果是 很常見的滾動條超出某個元素時,該元素固定在頂部
網上看到的獲取滾動條高度及返回頂部的代碼
onPageScroll:function(e){ // 獲取滾動條當前位置 console.log(e) }, goTop: function (e) { // 一鍵回到頂部 if (wx.pageScrollTo) { wx.pageScrollTo({ scrollTop: 0 }) } else { wx.showModal({ title: ‘提示‘, content: ‘當前微信版本過低,無法使用該功能,請升級到最新微信版本後重試。‘ }) } }
在api上實在找不到在沒有任何觸發情況下獲取view在視圖中的位置 只能退而求其次,當點擊元素時會獲取到當前元素的所有信息,其中的detail.y就是在Y軸上的位置
代碼如下:
<view class=‘tab-con‘ bindtap="getTabScrollTop"> <view class="tab {{tabFixed ? ‘tab-fixed‘:‘‘}}"> <view>二月</view> <view>三月</view> <view>四月</view> </view> </view>
js代碼大概如下
Page({ data: { tabScrollTop: 0, tabFixed: false }, getTabScrollTop: function (e) { this.setData({ tabScrollTop: e.detail.y, }); }, onPageScroll: function (e) { // 獲取滾動條當前位置 if (e.scrollTop > this.data.tabScrollTop) { this.setData({ tabFixed: true }) }else{ this.setData({ tabFixed: false }) } }, })
在沒有任何點擊觸發下,還不知道該怎麽做
小程序頁面獲取滾動條高度