欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)左右聯(lián)動(dòng)

 更新時(shí)間：2021年09月24日 10:58:04   作者：DonJiger  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左右聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)左右聯(lián)動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

最近學(xué)校課程系統(tǒng)分析項(xiàng)目使用了微信小程序來(lái)進(jìn)行搭建，在選擇了點(diǎn)餐項(xiàng)目后，對(duì)主頁(yè)進(jìn)行實(shí)現(xiàn)時(shí)，想要實(shí)現(xiàn)像麥當(dāng)勞點(diǎn)餐一樣，左邊表示類別，右邊表示菜品，通過(guò)點(diǎn)擊左邊的類，右邊會(huì)滾動(dòng)到對(duì)應(yīng)的類，滾動(dòng)右邊的菜品，左邊當(dāng)前滾動(dòng)到的菜品類別也回高亮顯示。那么首先先展示一下成果吧！

雖然這個(gè)功能很小，但我覺(jué)得一旦搞清楚scroll-view的原理就很有用處。

首先查看微信小程序的官方文檔：scroll-view

下面來(lái)按照我自己的理解介紹我所使用到的屬性：

  • scroll-y: 設(shè)置滾動(dòng)的方向，x就是橫著，y就是豎著，屬性的類型是boolean值
  • scroll-top:就是說(shuō)scroll-top的值是距離頂部的值，你將它寫(xiě)在哪個(gè)scroll-view中，scroll-view就距離頂部多遠(yuǎn)，不過(guò)我們可以設(shè)置變量值，在js中按照條件更改它，這也是實(shí)現(xiàn)左右聯(lián)動(dòng)的關(guān)鍵步驟。
  • scroll-into-view: scrol-into-view就是一個(gè)id值，我們實(shí)現(xiàn)左右聯(lián)動(dòng)是豎直方向上的滾動(dòng)，所以設(shè)置scroll-into-view就是說(shuō)當(dāng)前scroll-into-view的值是多少，那么當(dāng)前所在的scroll-view就會(huì)滾動(dòng)到哪個(gè)id。
  • style=‘height：這里輸入高度'，你設(shè)置的要滾動(dòng)的組件必須有個(gè)高度，否則就不會(huì)進(jìn)行滾動(dòng)，這也很好理解，你不設(shè)置一下他框的高度，那scroll-view也不知道從哪里開(kāi)始滑呀是不是。有時(shí)候需要在頁(yè)面中央（只占部分高度）設(shè)置一個(gè)滑塊，有時(shí)候需要在整個(gè)窗口高度設(shè)置，所以高度也是必須的一個(gè)屬性。
  • scroll-with-animation：是在設(shè)置滾動(dòng)條位置進(jìn)行動(dòng)畫(huà)過(guò)渡，我發(fā)現(xiàn)刪除該屬性也可以正常使用，可能在我寫(xiě)的頁(yè)面暫時(shí)沒(méi)有使用到吧，之后還需在進(jìn)行了解
  • bindscroll：綁定一個(gè)函數(shù)，由于是滾動(dòng)，沒(méi)有點(diǎn)擊觸發(fā)，故有一個(gè)綁定的函數(shù)，用于在滑動(dòng)時(shí)執(zhí)行函數(shù)內(nèi)容
  • 好的既然搞清楚組件的屬性，那么我們開(kāi)始實(shí)現(xiàn)吧，我的思路是左右各設(shè)置一個(gè)滑塊，兩邊都可以滑，先實(shí)現(xiàn)左邊聯(lián)動(dòng)右邊，左邊的功能是點(diǎn)擊類右邊就可以進(jìn)行跳轉(zhuǎn)
<scroll-view class='aside' scroll-y='true' style='height:{{asideheight}}px' scroll-with-animation="true" scroll-top='{{itemLeftToTop}}'  >
    
    <view  wx:for="{{menus}}" wx:key="id"  data-id="{{item.id}}" bindtap='tabMenu' class="{{item.id === currentLeftSelected ? 'menu active' : 'menu'}}">

    <view id="{{item.id}}">{{item.name}}</view>
    </view>

    <view class="option" >
    <button id='user_btn' bindtap='getin' >個(gè)</button>
    <image id='user_img' src='../../images/index/user_option.png'></image>
    </view>
    
  </scroll-view>
  <!--每一類菜品的具體信息，可進(jìn)行按鈕添加每個(gè)菜品的數(shù)量-->
  
  <scroll-view class="item-content" scroll-y='true' scroll-into-view="{{itemScrollId}}" scroll-with-animation='true' style='height:{{asideheight}}px'  bindscroll="right" >
    <view wx:for="{{menus}}" wx:for-index="parentIndex" wx:key="id" id="{{item.id}}" >
    <view class="item_title">{{item.name}}</view>
    <view class="{{orderCount.num === 0 ? 'box' : 'box active'}}">
      <view class="item" wx:for="{{item.categroy}}" wx:key="categroyid" data-parentIndex='{{parentIndex}}' data-index='{{index}}'>
        <image  src="{{item.url}}"></image>
        <text class="title">{{item.categroy_name}}</text>
        <text class="price">￥ {{item.price}} 元</text>
        <view class="opera">
          <text class="btn_price " bindtap='del' data-id="{{item.id}}"  data-parentIndex='{{parentIndex}}' data-index='{{index}}'>-</text>
          <text class="num">{{item.num}}</text>
          <text class="btn_price" bindtap="add" data-id="{{item.id}}"  data-parentIndex='{{parentIndex}}' data-index="{{index}}">+</text>
        </view>    
      </view>
    </view>
    
    </view>
</scroll-view>

可以看到高度我是引用了一個(gè)變量，其在js中的實(shí)現(xiàn)如下：

wx.getSystemInfo({
      success: function (res) {
        var asideheight = res.windowHeight
        var asideheight1=0;
        that.setData({
          asideheight: asideheight,
          asideheight1:asideheight+80
        })
      },
      fail: () => { console.log("無(wú)法獲取顯示器高度，請(qǐng)檢查網(wǎng)絡(luò)連接") }
    });

并且在函數(shù)開(kāi)頭設(shè)置好左右每一小格的高度

const RIGHT_BAR_HEIGHT = 41;
// 右側(cè)每個(gè)子類的高度（固定）
const RIGHT_ITEM_HEIGHT = 122;
// 左側(cè)每個(gè)類的高度（固定）
const LEFT_ITEM_HEIGHT = 41;

左邊的實(shí)現(xiàn)較為簡(jiǎn)單，設(shè)置兩個(gè)個(gè)data，currentLeftSelected和itemScrollId當(dāng)前點(diǎn)擊的類的ID值賦給這兩個(gè)，前者實(shí)現(xiàn)點(diǎn)擊時(shí)左邊類被選定的狀態(tài)，而右邊的值賦給 itemScrollId，然后再將這個(gè)值賦給前端右半邊scroll-view的scroll-into-view，從而實(shí)現(xiàn)左邊點(diǎn)擊右邊也跳轉(zhuǎn)。

tabMenu: function (e) {
    this.setData({
      currentLeftSelected: e.target.id || e.target.dataset.id,
      itemScrollId: e.target.id || e.target.dataset.id 
    });
    console.log(e);
  },

右半邊的思路就是你需要算出右邊每一個(gè)菜品距離頂部的高度，保存至一個(gè)數(shù)組里，然后滑動(dòng)時(shí)獲取當(dāng)前滑動(dòng)的高度，然后在bindscroll里綁定的函數(shù)里進(jìn)行比較，對(duì)應(yīng)的是哪個(gè)高度的范圍就設(shè)置左邊的currentLeftSelected為那個(gè)類的id。

get_eachItemToTop: function () {
    var obj = {};
    var totop = 0;
    var menus_ex = {};
    var that = this;
    menus_ex= that.data.menus;
    console.log(menus_ex);
    for(let i=1;i<menus_ex.length;i++){
      totop += (RIGHT_BAR_HEIGHT + menus_ex[i - 1].categroy.length * RIGHT_ITEM_HEIGHT);
      obj[menus_ex[i] ? menus_ex[i].id : 'last'] = totop;  
    }
    return obj;
  },
  
  right: function (e) {
      for (let i = 0; i < this.data.menus.length; i++) {
       let left = this.data.eachrightScrollToTop[this.data.menus[i].id]
       let right = this.data.eachrightScrollToTop[this.data.menus[i + 1] ? this.data.menus[i + 1].id : 'last']
       if (e.detail.scrollTop < right && e.detail.scrollTop >= left) {
       this.setData({
         currentLeftSelected: this.data.menus[i].id,
         itemLeftToTop: LEFT_ITEM_HEIGHT * i
            })
          }
        }
   
    },

這樣左右聯(lián)動(dòng)就基本實(shí)現(xiàn)了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論