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

微信小程序下面商品左右滑動(dòng)上面tab也跟隨變動(dòng)功能實(shí)現(xiàn)

 更新時(shí)間：2022年07月11日 14:33:25   作者：努力中的小白羊  
這篇文章主要介紹了小程序下面商品左右滑動(dòng)上面tab也跟隨變動(dòng)功能,也就是點(diǎn)擊tab切換下面的商品信息，滑動(dòng)下面的商品信息tab也進(jìn)行切換，本文給大家分享實(shí)現(xiàn)代碼，需要的朋友可以參考下

小程序下面商品左右滑動(dòng)上面tab也跟隨變動(dòng)功能

點(diǎn)擊tab切換下面的上面信息，商品左右滑動(dòng)切換上面的tab分類

功能描述：點(diǎn)擊tab切換下面的商品信息；滑動(dòng)下面的商品信息tab也進(jìn)行切換。

第一步：我們先來說一下上面的tab,tab我們使用scroll-view scroll-x="true" 就可以。

<scroll-view class="cates" scroll-x="true" scroll-with-animation="true" >
    <block wx:for="{{cates}}" wx:key="index">
      <view class="{{item.id === currentId?'cate-item-act cate-item':'cate-item'}}" data-id="{{item.id}}" bindtap="cateChange">{{item.name}}</view>
    </block>
</scroll-view>
/* 分類 */
.cates {
  position: fixed;
  z-index: 100;
  top: 0;
  white-space: nowrap;
  width: 100%;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  font-family: Hiragino Sans GB;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}
.cates .cate-item {
  display: inline-block;
  padding: 10rpx 20rpx;
  font-size: 26rpx;
  margin-right: 20rpx;
  color: #767A84;
}
.cates .cate-item:last-child{
  margin-right: 0rpx;
}
.cates .cate-item-act {
  background: #3293FF;
  color: #fff;
  border-radius: 48rpx;
}

第二步：接著就是下面的商品部分，我們可以使用swiper +scroll-view 來完成。

<view class="content">
    <swiper class="cont-swiper" bindchange="swiperSwitchTab" style="height: 600px;">
      <block wx:key="index" wx:for="{{cates}}">
        <swiper-item class="cont-swiper-item" data-id="{{item.id}}" style="height:100%" wx:key="*this">
          <!-- 每個(gè)tab對(duì)應(yīng)的商品 -->
          <scroll-view scroll-y="true" style="height: 600px;" bindscroll="contenScrollY" scroll-with-animation="true">
            <block wx:for="{{serviceList}}" wx:key="index">
              <view class="con-item">{{item.name}}</view>
            </block>
          </scroll-view>  
        </swiper-item>
      </block>
    </swiper>
 </view>
/* 內(nèi)容 */
.content {
  width: 100%;
  height: 100%;
  padding: 130rpx 0rpx;
  box-sizing: border-box;
}
.content .cont-swiper {
  padding: 0 30rpx;
}
.content .con-item {
  width: 100%;
  height: 200rpx;
  background-color: rgb(180, 140, 221);
  margin-top: 30rpx;
  border-radius: 20rpx;
  line-height: 200rpx;
  text-align: center;
}

需要注意的問題：

1 swiper 本身是有高度的，不會(huì)因?yàn)閮?nèi)部元素?fù)伍_。

2 scroll-view scroll-y="true" 是需要給scroll設(shè)置高度。所以代碼中標(biāo)明的橘色是為了說明這個(gè)問題

swiperSwitchTab(e){
    // e.detail.current tab的index
    console.log('左右滑動(dòng)下面商品',e.detail.current)
    this.setData({
      currentId: this.data.cates[e.detail.current].id
    })
    // 根據(jù)id去調(diào)用接口，替換listData數(shù)據(jù)　　 this.getData();}

復(fù)制上面代碼試試效果吧！

到此這篇關(guān)于小程序下面商品左右滑動(dòng)上面tab也跟隨變動(dòng)功能的文章就介紹到這了,更多相關(guān)小程序tab內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • js 冒泡事件與事件監(jiān)聽使用分析

    js 冒泡事件與事件監(jiān)聽使用分析

    js 冒泡事件與事件監(jiān)聽 代碼分析
    2009-09-09
  • JS中比較冷門但非常好用的方法總結(jié)

    JS中比較冷門但非常好用的方法總結(jié)

    在Js中有一些比較冷門但是非常好用的方法，我在這里稱之為高級(jí)方法，這些方法沒有被廣泛使用或多或少是因?yàn)榇嬖谝恍┘嫒菪缘膯栴}，不是所有的瀏覽器都讀得懂的，這篇文章主要就是對(duì)這些方法做一個(gè)總結(jié)，讓我們一起來看一下吧
    2023-06-06
  • 小試小程序云開發(fā)(小結(jié))

    小試小程序云開發(fā)(小結(jié))

    這篇文章主要介紹了小試小程序云開發(fā)(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-06-06
  • JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼(包括Tab,選項(xiàng)卡,橫向等效果)

    JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼(包括Tab,選項(xiàng)卡,橫向等效果)

    這篇文章主要介紹了JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼,以實(shí)例形式實(shí)現(xiàn)了包括Tab,選項(xiàng)卡,橫向等效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
    2015-09-09
  • 基于dataset的使用和圖片延時(shí)加載的實(shí)現(xiàn)方法

    基于dataset的使用和圖片延時(shí)加載的實(shí)現(xiàn)方法

    下面小編就為大家分享一篇基于dataset的使用和圖片延時(shí)加載的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2017-12-12
  • JavaScript實(shí)現(xiàn)表格點(diǎn)擊排序的方法

    JavaScript實(shí)現(xiàn)表格點(diǎn)擊排序的方法

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)表格點(diǎn)擊排序的方法,可實(shí)現(xiàn)點(diǎn)擊頂部數(shù)據(jù)項(xiàng)標(biāo)題實(shí)現(xiàn)對(duì)應(yīng)數(shù)據(jù)列的排序效果,涉及javascript鼠標(biāo)事件及數(shù)據(jù)排序的技巧,需要的朋友可以參考下
    2015-05-05
  • 學(xué)習(xí)RxJS之JavaScript框架Cycle.js

    學(xué)習(xí)RxJS之JavaScript框架Cycle.js

    這篇文章主要介紹了學(xué)習(xí)RxJS之JavaScript框架Cycle.js ,它是一個(gè)極簡(jiǎn)的JavaScript框架（核心部分加上注釋125行），提供了一種函數(shù)式，響應(yīng)式的人機(jī)交互接口,需要的朋友可以參考下
    2019-06-06
  • 微信小程序canvas動(dòng)態(tài)時(shí)鐘

    微信小程序canvas動(dòng)態(tài)時(shí)鐘

    這篇文章主要為大家詳細(xì)介紹了微信小程序canvas動(dòng)態(tài)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-10-10
  • JS數(shù)組排序方法實(shí)例分析

    JS數(shù)組排序方法實(shí)例分析

    這篇文章主要介紹了JS數(shù)組排序方法,結(jié)合實(shí)例形式分析了javascript數(shù)組冒泡排序與選擇排序原理及實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2016-12-12
  • JS庫(kù)之wow.js使用方法

    JS庫(kù)之wow.js使用方法

    近日，在做項(xiàng)目中，需要做到滾動(dòng)條滑到某個(gè)位置時(shí)，才能顯示動(dòng)畫，網(wǎng)上查詢到有個(gè)wow.js可以達(dá)到要求，現(xiàn)在把使用方法做如下總結(jié)，需要的朋友參考下吧
    2017-09-09

最新評(píng)論