1. 程式人生 > >微信小程式tab導航+滾動頂部吸附效果(開發例項)

微信小程式tab導航+滾動頂部吸附效果(開發例項)

<!-- scroll導航欄 -->
      <view class='scrollBox2 fix-news' wx:if="{{fixTop<scrollTop}}">
      <scroll-view scroll-x="true" class="weui-navbar">
        <block wx:for="{{list}}" wx-for-index="idnex">
          <view class="swiper-tab-list {{currentTab==index ? 'on' : ''}}" data-current="{{index}}" bindtap="swichNav">{{item}}</view>
        </block>
      </scroll-view>
     </view>
     <view class='scrollBox static-news'>
      <scroll-view scroll-x="true" class="weui-navbar" >
        <block wx:for="{{list}}" wx-for-index="idnex">
          <view class="swiper-tab-list {{currentTab==index ? 'on' : ''}}" data-current="{{index}}" bindtap="swichNav">{{item}}</view>
        </block>
      </scroll-view>
     </view>
    
     <!-- scroll導航欄 -->
Page({
  data: {
  
    list:["視訊","問答","音訊","文章"],
    currentTab:0,
    fixTop: '',//區域離頂部的高度
   
  },
  //事件處理函
  onShow: function () {
    let self = this;
    wx.createSelectorQuery().select('.static-news').boundingClientRect(function (rect) {
      self.setData({
        fixTop: rect.top,
      })
    }).exec()
  },
  onPageScroll: function (e) {
    var that = this
    that.setData({
      scrollTop: e.scrollTop
    })
  },
})
.fix-news{
  position: fixed;
  top:0;
  left: 0;
  z-index: 99999;
}

希望對大家有幫助 認真看一下

相關推薦

程式tab導航+滾動頂部吸附效果開發例項

<!-- scroll導航欄 --> <view class='scrollBox2 fix-news' wx:if="{{fixTop<scrollTop}}"&g

使Atom支援程式程式碼格式wxml,wxss有顏色高亮

在用Atom來瀏覽或者編輯微信小程式時的介面時全灰色文字怎麼辦?!! 如何讓wxml和wxs格式的程式碼像HTML,CSS變成高亮的呢。。 就像這樣 ↓↓↓↓↓↓↓ 修改步驟如下 1.在Atom中裝

程式模擬彈窗提示使用者授權wxss+wxml

效果圖: wxml內容: <!-- index.wxml --> <view class="modal-box" hidden='{{!showTip}}'> <view class="modal-content"> &

程式中如何修改陣列指定元素或物件

1、更改陣列中的值 可以改變陣列中某一個特定下標的值 //陣列 paraList:[{txt:'123',chose:false},{txt:'1234',chose:false}] //細節 l

Python程式,實現自動回覆等功能itchat模組

本文是使用Python的itchat模組進行微信私聊訊息以及群訊息的自動回覆功能,必須在自己的微信中新增微訊號xiaoice-ms(微軟的微信機器人)才能實現,直接複製程式碼執行之後掃一掃二維碼即可,經過測試,該程式能夠保持幾小時的時間。實現原理,將別人傳送給你的訊息轉發給A

程式——自定義個性化模態框附程式碼

微信小程式官方提供的模態框主要有以下幾種,這幾種方法都只能簡單的顯示文字內容,不能達到設計要求。最後只能通過自定義實現可以靈活設計的彈框。 主要原理: 和普通的css相同,利用 z-index實現不同層的顯示,以實現彈框效果。 先附上最終效果圖:

程式官方橫向滾動tab

先看效果: Page({     data: {         bodyList: [           {               id:1,               title:"美食"           },            {        

技術白之記錄程式底部導航

有了圖片有了文字怎麼能沒有導航欄呢,所以下面來記錄下底部導航欄的過程,先展示下我做的簡易的導航欄圖片。 可以在上面的圖片中看到底部的包含“推薦”“反饋”的一個底部導航欄。製作導航欄只需要開啟微信小程式app.json,向{}裡填入下列程式碼: "tabBar": { "col

程式-文字迴圈滾動效果

WXML <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="1000"> <block wx:for="{{msgList}}">

程式Tab切換下面的圖表顯示

之前沒有怎麼做過小程式,最近公司需要剛上來就做圖表,這對於我來說是一個挑戰。 在沒做之前覺得沒什麼,但是後來有一個很大的bug。就是在做Tab切換的時候,我發現頁面不管是上下還是左右滑動的時候圖表會懸浮在上面,不會隨著頁面進行移動。 結果發現swiper和s

程式文字迴圈滾動效果

WXML <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="1000"> <block wx:for="{{

程式地圖導航之多樣式線條

polyline: [ { points: [{ longitude: 113.3245211, latitude: 23.10229 }, { lo

程式隱藏右側滾動

微信小程式隱藏右側滾動條 當頁面元素列表過多的時候,右側會默認出現一個很難看的滾動條,這個時候就需要寫程式碼將這個滾動條隱藏起來了。   其實方法很簡單;只需要在wxss裡面新增這樣的一段程式碼即可 ::-webkit-scrollbar{ width: 0; hei

程式 Tab實現,可滑動、可點選

效果: 直接碼吧,做個筆記。 tab.wxml: <view class="swiper-tab"> <view class="swiper-tab-item {{c

程式-tab選項卡

目的:tab選項卡 知識點: 1、flex佈局; 2、資料繫結; 3、條件渲染; 4、列表渲染; 5、事件; 第一步:設定json資料 由於都是自己本地寫,沒用介面資料,所以在data裡面自己寫了一個

程式---tab切換

微信小程式開發中選項卡.在android中選項卡一般用fragment,到了小程式這裡瞬間懵逼了. 總算做出來了.分享出來看看. 先看效果: 再上程式碼: 1.index.wxml <!--index.wxml--> <viewcla

程式 tab切換

設定背景顏色就直接在page裡設定    page {background-color: rgb(242, 242, 242);} tab切換: navigator 頁面連結 傳參的格式為url="路徑?title={{item.title}}"   多個用&a

程式底部導航Tabbar

底部導航欄這個功能是非常常見的一個功能,基本上一個完成的app,都會存在一個導航欄,那麼微信小程式的導航欄該怎麼實現呢?經過無數的踩坑,終於實現了,好了,先看看效果圖。 對於底部導航欄,小程式上給出的文件要求裡面的item最少2個,最多五個。 好了,先看看程式碼: 在專案中找到這個檔案 &nb

開源一款可以發文字發圖片的實時聊天程式,可以滾動內容到底部

前言:因專案開發需要實現一個線上聊天功能,但發現已有的開源的實時聊天功能,一片空白,勉強有關聯的也並不能滿足自己的需求,所以便自己動手開發,在其中踩了很多坑,吃了很多苦,為了讓跟我有同樣需求的小夥伴可以跳過這些坑,所以決定在github上開源該專案,希望能幫到你,github

程式-scroll-view滾動到索引位置(二)

有一些重要的關鍵點請看上一篇文章 主要用到scroll-into-view  如果你想讓他回頂部 直接用scroll-top即可 話不多說,看程式碼 wxml <scroll-view scroll-y="true" scroll-into-view="{{to