婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > 微信小程序頁面向下滾動時tab欄固定頁面頂部實例講解

微信小程序頁面向下滾動時tab欄固定頁面頂部實例講解

熱門標簽:地圖標注平臺怎么給錢注冊 安裝電銷外呼系統 福州人工外呼系統哪家強 釘釘打卡地圖標注 注冊400電話申請 新河科技智能外呼系統怎么樣 百度商鋪地圖標注 衡水外呼系統平臺 常州地圖標注服務商

先看一下效果圖:

 index.wxml

 view class='{{tabIsTop ? "fixedTop" : ""}}'>
 i-tabs tabcurrent="{{tabcurrent}}" color="#FF0000" bindchange="tabChange">
 i-tab key="tab1" title="車主圈">/i-tab>
 i-tab key="tab2" title="行業新聞">/i-tab>
 i-tab key="tab3" title="養護寶典">/i-tab>
 i-tab key="tab4" title="自駕游">/i-tab>
 /i-tabs>
 /view>

特別說明:這里使用的tab標簽頁是iviewui的框架,地址:https://weapp.iviewui.com/components/tabs

 index.wxss

.fixedTop {
 width: 100%;
 position: fixed;
 top: 0;
 z-index: 99;
}

index.js

Page({
 /**
 * 頁面的初始數據
 */
 data: {
 tabcurrent: 'tab1',
 tabIsTop:false,
 scrollTop: 0,
 },
 /**
 * 生命周期函數--監聽頁面加載
 */
 onLoad: function (options) {
 
 },
 ontabChange(event) {
 this.setData({ active: event.detail });
 },
 //監聽屏幕滾動 判斷上下滾動
 onPageScroll: function (ev) {
 var _this = this;
 //當滾動的top值最大或最小時,為什么要做這一步是因為在手機實測小程序的時候會發生滾動條回彈,所以為了處理回彈,設置默認最大最小值
 if (ev.scrollTop = 0) {
  // 滾動到最頂部
  ev.scrollTop = 0;
  this.setData({ tabIsTop: false });
 } else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
  // 滾動到最底部
  ev.scrollTop = wx.getSystemInfoSync().windowHeight;
 }
 //判斷瀏覽器滾動條上下滾動
 if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
  //向下滾動
  this.setData({ tabIsTop: true });
 } else {
  //向上滾動
 }
 //給scrollTop重新賦值
 setTimeout(function () {
  _this.setData({
  scrollTop: ev.scrollTop
  })
 }, 0)
 },
})

到此這篇關于微信小程序頁面向下滾動時tab欄固定頁面頂部實例講解的文章就介紹到這了,更多相關微信小程序頁面向下滾動時tab欄固定頁面頂部內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家!

您可能感興趣的文章:
  • Spring Boot 2結合Spring security + JWT實現微信小程序登錄
  • springboot+jwt+springSecurity微信小程序授權登錄問題
  • 微信小程序之高德地圖多點路線規劃過程示例詳解
  • 使用Typescript開發微信小程序的步驟詳解

標簽:克拉瑪依 白城 鷹潭 鶴崗 六安 唐山 遼陽 柳州

巨人網絡通訊聲明:本文標題《微信小程序頁面向下滾動時tab欄固定頁面頂部實例講解》,本文關鍵詞  微信,小,程序,頁面,向下,;如發現本文內容存在版權問題,煩請提供相關信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《微信小程序頁面向下滾動時tab欄固定頁面頂部實例講解》相關的同類信息!
  • 本頁收集關于微信小程序頁面向下滾動時tab欄固定頁面頂部實例講解的相關信息資訊供網民參考!
  • 推薦文章
    主站蜘蛛池模板: 河北省| 南通市| 通辽市| 手游| 阜新| 雅江县| 西乡县| 荔波县| 太谷县| 周口市| 怀仁县| 东宁县| 卫辉市| 左权县| 龙岩市| 郁南县| 霍邱县| 沧州市| 蒙城县| 寻乌县| 紫阳县| 鹤庆县| 衢州市| 刚察县| 嘉黎县| 阿克苏市| 鲁山县| 台中县| 南溪县| 二连浩特市| 沽源县| 临沂市| 全椒县| 鲜城| 罗源县| 嘉鱼县| 和田县| 石景山区| 龙泉市| 泾川县| 广安市|