婷婷综合国产,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欄固定頁面頂部實例講解的相關信息資訊供網民參考!
  • 推薦文章
    主站蜘蛛池模板: 正蓝旗| 常熟市| 琼结县| 东宁县| 保康县| 荃湾区| 林甸县| 大化| 思南县| 汉中市| 吴江市| 平安县| 迁安市| 清镇市| 乾安县| 清水河县| 新巴尔虎左旗| 宣城市| 江油市| 孝感市| 蓬莱市| 河源市| 抚顺市| 西昌市| 北辰区| 正蓝旗| 军事| 江源县| 雷州市| 江油市| 开封市| 佛冈县| 永仁县| 富顺县| 益阳市| 浦江县| 池州市| 巩留县| 眉山市| 安达市| 山丹县|