国产亚洲精品资源在线26u

      
      
      <th id="ljgpb"><pre id="ljgpb"><sup id="ljgpb"></sup></pre></th>

      <rp id="ljgpb"></rp>

      您現在的位置: 微信小程序 > 微信小程序開發 > 教程 >

      小程序--滑動右側字母索引

      來源:微信小程序 編輯:Yiyongtong.com 發布時間:2020-05-22 09:59熱度:

      微信和通訊錄經??吹竭@種,那么在小程序如何實現呢(等下我們需要用到小程序的一個官方組件),這個功能可以拆分兩塊,一個是滾動區域,一個是滑動定位區域。

      實現

      滾動區域

      小程序里面實現滾動到指定位置,可以用 scroll-view 組件. (點擊我即可查看小程序文檔)

      <scroll-view class="goup_list" scroll-with-animation="true" scroll-y="true" style="height: 300rpx;" scroll-into-view="{{toView}}">
          <具體業務界面代碼 />
      </scroll-view>
      復制代碼

      最后面是我剛剛錄gif的代碼??梢钥吹?nbsp;scroll-view 組件,有一個屬性 scroll-into-view ,這個屬性可以實現轉跳到指定位置。值是id,也就是Gif看到的 B、C、D的ID。

      (最后會有完整代碼)

      滑動實現

      滑動我們會想到 touchmove 事件,我們需要依靠這個判斷滑動到了哪個索引(字母)。

      但是滑動里面沒有直接告訴你,是哪個組件,所以我們需要根據現有的信息進行利用,這里用的是y,x的信息。

      拿到x,y之后的邏輯如下

      用文字不好描述清楚,看下面圖,可以這樣求偏差值,然后除以每項的高度,就拿到了滑動到了第幾項。 這里又涉及一個問題就是,怎么求單個項的高度。 height / 個數。

      代碼

      var y = e.touches[0].pageY;
          var itemLen = this.data.list.length
          var height = letterDomRes.height
          var top = letterDomRes.top
          // 滑動的偏移量(偏差值)
          var offsetTop = (height + top - y)
          var itemHeight = height / itemLen
          var index = itemLen - ((offsetTop / itemHeight)|0) - 1
          if(index < 0 || index >= itemLen){
            return
          }
      復制代碼

      還有就是上面數據從哪里來,也就是小程序如何拿下圖中的top值和height。

      代碼

      //創建節點選擇器
      var query = wx.createSelectorQuery()
      query.select('.letter-index').boundingClientRect()
      query.exec(function (res) {
            letterDomRes = res[0]
            console.log(letterDomRes);
      })
      復制代碼

      letterDomRes.height letterDomRes.top 就是我們需要的數據了。

      到這里就都完成了。然后加一個優化,超出滑動范圍就return,上面代碼也有了,然后設置的時候判斷是否在滑動期間,是的話過濾相同的設置。

      完整代碼

      JS

      // pages/word/strange.js
      var letterDomRes = {}
      var moveing_word = ''
      Page({
      
        /**
         * 頁面的初始數據
         */
        data: {
          toView: '',
          list: [
            {
              word: 'B',
              children: [
                {word: 'Ban', translation: 'vt. 禁止,查禁;n. 禁止,禁令'},
                {word: 'Ban', translation: 'vt. 禁止,查禁;n. 禁止,禁令'},
                {word: 'Ban', translation: 'vt. 禁止,查禁;n. 禁止,禁令'},
              ]
            },
            {
              word: 'C',
              children: [
                {word: 'Ban', translation: 'vt. 禁止,查禁;n. 禁止,禁令'},
                {word: 'Ban', translation: 'vt. 禁止,查禁;n. 禁止,禁令'},
                {word: 'Ban', translation: 'vt. 禁止,查禁;n. 禁止,禁令'},
              ]
            },
            {
              word: 'D',
              children: [
                {word: 'Ban', translation: 'vt. 禁止,查禁;n. 禁止,禁令'},
                {word: 'Ban', translation: 'vt. 禁止,查禁;n. 禁止,禁令'},
                {word: 'Ban', translation: 'vt. 禁止,查禁;n. 禁止,禁令'},
              ]
            },
          ]
        },
        // ---- methods
        letterTap(e){
          var id = e.target.id
          // console.log(id)
          this.setListSite(id)
        },
        letterMove(e){
          var y = e.touches[0].pageY;
          var itemLen = this.data.list.length
          var height = letterDomRes.height
          var top = letterDomRes.top
          // 滑動的偏移量(偏差值)
          var offsetTop = (height + top - y)
          var itemHeight = height / itemLen
          var index = itemLen - ((offsetTop / itemHeight)|0) - 1
          if(index < 0 || index >= itemLen){
            return
          }
          var letter = this.data.list[index].word
          // console.log(index, letter)
      
          // [優化] 過濾相同的
          if(moveing_word == letter){
            return
          }
          moveing_word = letter
          this.setListSite('word_' + letter)
          // console.log(height / this.data.list.length)
          //  / this.data.list.length
          // console.log(letterDomRes.top)
        },
        letterEnd(e){
          // 重置
          moveing_word = ''
        },
        /**
         * 設置滾動位置
         * @param {String} id 前綴 + 字母
         */
        setListSite(id){
          wx.showToast({
            title: id.split('_')[1],
            icon: 'none',
          })
          this.setData({
            toView: id,
            duration: 500,
          })
        },
        /**
         * 生命周期函數--監聽頁面加載
         */
        onLoad: function (options) {
        },
      
        /**
         * 生命周期函數--監聽頁面初次渲染完成
         */
        onReady: function () {
          //onshow中獲取索引條高度
          var query = wx.createSelectorQuery();//創建節點選擇器
          query.select('.letter-index').boundingClientRect()
          query.exec(function (res) {
            //res就是 所有標簽為mjltest的元素的信息 的數組
            letterDomRes = res[0]
            console.log(letterDomRes);
            //取高度
            console.log("height : "+res[0].height);
          })
        },
      
        /**
         * 生命周期函數--監聽頁面顯示
         */
        onShow: function () {
      
        },
      
        /**
         * 生命周期函數--監聽頁面隱藏
         */
        onHide: function () {
      
        },
      
        /**
         * 生命周期函數--監聽頁面卸載
         */
        onUnload: function () {
      
        },
      
        /**
         * 頁面相關事件處理函數--監聽用戶下拉動作
         */
        onPullDownRefresh: function () {
      
        },
      
        /**
         * 頁面上拉觸底事件的處理函數
         */
        onReachBottom: function () {
      
        },
      })
      復制代碼

      WXML

      <!--pages/word/strange.wxml-->
      <view class="container">
          <scroll-view class="goup_list" scroll-with-animation="true" scroll-y="true" style="height: 300rpx;" scroll-into-view="{{toView}}">
              <view class="">
                  <view class="group_item" wx:for="{{list}}" wx:key="{{index}}">
                      <view class="group">
                          <view class="title" id="word_{{item.word}}">{{item.word}}</view>
                          <view class="word_list">
                              <view class="word_list_item" wx:for="{{item.children}}" wx:key="{{index}}">
                                  <view class="e">
                                      <view>{{item.word}}</view>
                                      <view class="">{{item.translation}}</view>
                                  </view>
                                  <image mode="widthFix" src="/image/right.png" class="right-image" />
                              </view>
                          </view>
                      </view>
                  </view>
              </view>
          </scroll-view>
          <view class="letter-index" bind:touchmove="letterMove" bindtap="letterTap" bind:touchend="letterEnd">
              <view class="item" id="word_{{item.word}}" wx:for="{{list}}" wx:key="index">{{item.word}}</view>
          </view>
      </view>
      
      復制代碼
      国产亚洲精品资源在线26u

          
          
          <th id="ljgpb"><pre id="ljgpb"><sup id="ljgpb"></sup></pre></th>

          <rp id="ljgpb"></rp>