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

微信小程序?qū)崿F(xiàn)滑動/點擊切換Tab及scroll-left的使用

 更新時間：2023年04月21日 14:34:14   作者：蘇蘇哇哈哈  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動/點擊切換Tab,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

背景

?? swiper+scroll-view實現(xiàn)滑動/點擊切換Tab，以及scroll-left的使用~

1.實現(xiàn)效果

2.實現(xiàn)步驟

2.1 scroll-view實現(xiàn)tab列表

scroll-view：
可滾動視圖區(qū)域。使用豎向滾動時，需要給scroll-view一個固定高度，通過 WXSS 設(shè)置 height。組件屬性的長度單位默認為px。
scroll-x（boolean）：允許橫向滾動
scroll-y（boolean）：允許縱向滾動
scroll-left(number/string)：設(shè)置橫向滾動條位置
scroll-with-animation(boolean)：在設(shè)置滾動條位置時使用動畫過渡

  • 定義一個tab列表，scroll-view包裹，允許橫向滾動，設(shè)置scroll-left默認為0
  • 每個tab設(shè)置為display: inline-block，scroll-view設(shè)置 white-space: nowrap不換行

<scroll-view scroll-x class="container-head-sc" scroll-left="{{sleft}}" scroll-with-animation="true">
	 <view class="item" wx:key="list" wx:for="{{list}}" wx:for-index="index">tab-{{index+1}} </view>
 </scroll-view>
.container-head-sc {
  height: 50rpx;
  border-radius: 25rpx;
  background: #eeece4;
  color: #333;
  white-space: nowrap;
}

.container-head-sc .item {
  padding: 0 20rpx;
  min-width: 90rpx;
  text-align: center;
  line-height: 50rpx;
  font-size: 26rpx;
  display: inline-block;
  height: 50rpx;
}

給每個tab設(shè)置vertical-align: top;防止高度塌陷

.container-head-sc .item{
  /* 防止高度塌陷 */
 + vertical-align: top;
}

添加當前激活tab樣式，定義當前選中項索引currentTab默認為0（即選中第一個），當currentTab==列表的某一項索引表示選中

 <view class="item {{currentTab == index ?'active':''}}" data-current="{{index}}" catchtap="handleTabChange" wx:key="list" wx:for="{{list}}" wx:for-index="index">tab-{{index+1}} </view>
.container-head-sc .active {
  color: #ffffff;
  font-weight: bold;
  background: orange;
  border-radius: 25rpx;
}

添加切換事件

handleTabChange(e) {
	let { current } = e.target.dataset;
	if (this.data.currentTab == current || current === undefined) return;
	this.setData({
	  currentTab: current,
	});
},

2.2 swiper+scroll-iew 實現(xiàn)內(nèi)容列表

swiper：
滑塊視圖容器。默認高度為150px；
current（number）：當前所在滑塊的 index，默認為0
autoplay(boolean):是否自動切換
bindchange(eventhandle):current 改變時會觸發(fā) change 事件，event.detail = {current, source}

swiper包裹內(nèi)容列表，需要為swiper指定高度，這里我們設(shè)置為撐滿一屏

/* swiper默認高度為150px */
.container-swiper {
  height: calc(100% - 110rpx);
}

設(shè)置swiper的current為當前選中的tab標簽索引，即currentTab

<swiper current="{{currentTab}}"  class="container-swiper">
 <swiper-item class="flex-column j_c" wx:for="{{list}}" wx:key='index'>
 </swiper-item>
</swiper>

swiper-item展示內(nèi)容列表，用scroll-view包裹內(nèi)容，設(shè)置豎向滾動，使用豎向滾動時，需要給scroll-view一個固定高度，這里將scroll-view高度設(shè)置為100%，與swiper同高，鋪滿一屏

<swiper-item class="flex-column j_c" wx:for="{{list}}" wx:key='index'>
  <scroll-view scroll-y class="container-swiper-sc">
     <view class="flex-wrap flex-row items">
     ....//內(nèi)容
     </view>
   </scroll-view>
 </swiper-item>
.container-swiper-sc {
  height: 100%;
}

swiper添加bindchange事件，當滑動時候，動態(tài)的設(shè)置currentTab，實現(xiàn)tab列表的同步更新

<swiper current="{{currentTab}}" bindchange="handleSwiperChange" class="container-swiper">
	....//內(nèi)容
</swiper>
  handleSwiperChange(e) {
    this.setData({
      currentTab: e.detail.current,
    });
  },
  • 可以發(fā)現(xiàn)，當swiper所在滑塊的 index超出tab列表的可視范圍，我們得手動滑動tab列表才能看見當前所選中的tab
  • 找到2.1節(jié) scroll-left=“{{sleft}}”，scroll-left用來設(shè)置橫向滾動條位置，也就是說，我們可以監(jiān)聽swiper的滾動，在滑塊所在的index改變的時候，去動態(tài)的設(shè)置scroll-left的位置
  • scroll-left的計算

wx.createSelectorQuery():
返回一個 SelectorQuery 對象實例
SelectorQuery.selectAll(string selector):
在當前頁面下選擇匹配選擇器 selector 的所有節(jié)點。

getScrollLeft() {
	const query = wx.createSelectorQuery();
	query.selectAll(".item").boundingClientRect();
	//這里將會返回頁面中所有class為item的節(jié)點，個數(shù)為tab列表的長度
	query.exec((res) => {
	  let num = 0;
	  for (let i = 0; i < this.data.currentTab; i++) {
	    num += res[0][i].width;
	  }
	  // 計算當前currentTab之前的寬度總和
	  this.setData({
	    sleft: Math.ceil(num),
	  });
	});
},

修改swiper的bindchange事件，每次滑塊的變化，都重新計算scroll-left的大小

  handleSwiperChange(e) {
   + this.getScrollLeft();
  },

3.實現(xiàn)代碼

<view class="head flex-row">
  <view class="head-title">scroll-left</view>
</view>
<scroll-view scroll-y class="container">
  <view class="container-head flex-row">
    <scroll-view scroll-x class="container-head-sc" scroll-left="{{sleft}}" scroll-with-animation="true">
      <view class="item {{currentTab == index ?'active':''}}" data-current="{{index}}" catchtap="handleTabChange" wx:key="list" wx:for="{{list}}" wx:for-index="index">tab-{{index+1}} </view>
    </scroll-view>
  </view>
  <swiper current="{{currentTab}}" bindchange="handleSwiperChange" class="container-swiper">
    <swiper-item class="flex-column j_c" wx:for="{{list}}" wx:key='index'>
      <scroll-view scroll-y class="container-swiper-sc">
        <view class="flex-wrap flex-row items">
          <block wx:for="{{item}}" wx:key="index">
            <image src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" mode="aspectFill" class="item-img" />
          </block>
        </view>
      </scroll-view>
    </swiper-item>
  </swiper>
</scroll-view>
page {
  background-color: #ffa500;
  height: 100%;
}
.head {
  height: 90rpx;
  color: #333;
  font-size: 30rpx;
  padding-left: 30rpx;
  font-weight: bold;
  padding-bottom: 10rpx;
  box-sizing: border-box;
}
.head-title {
  position: relative;
  display: inline-block;
  height: 100%;
}
.head-title::after {
  content: '';
  position: absolute;
  z-index: 99;
  width: 15px;
  height: 15px;
  margin-left: -15rpx;
  border-top: 3px solid #333;
  border-right: 3px solid #333;
  border-top-right-radius: 100%;
  transform: rotate(-225deg);
  left: 50%;
  bottom: 3px;
}
.container {
  width: 100%;
  height: calc(100% - 90rpx);
  background-color: #fff;
  overflow: hidden;
  border-radius: 30rpx 30rpx 0 0;
}
.container-head {
  width: 100%;
  height: 110rpx;
  box-sizing: border-box;
  padding: 10rpx 20rpx;
}
.container-head-sc {
  height: 50rpx;
  border-radius: 25rpx;
  background: #eeece4;
  color: #333;
  white-space: nowrap;
}
.container-head-sc .item {
  padding: 0 20rpx;
  min-width: 90rpx;
  text-align: center;
  line-height: 50rpx;
  font-size: 26rpx;
  display: inline-block;
  /* 引起高度塌陷 */
  vertical-align: top;
  height: 50rpx;
}
.container-head-sc .active {
  color: #ffffff;
  font-weight: bold;
  background: orange;
  border-radius: 25rpx;
}
/* swiper默認高度為150px */
.container-swiper {
  height: calc(100% - 110rpx);
}
.container-swiper-sc {
  height: 100%;
}
.container-swiper-sc .items {
  padding: 0 2%;
  width: 100%;
  box-sizing: border-box;
}
.container-swiper-sc .items .item-img {
  width: 30vw;
  height: 30vw;
  margin-right: 2.8%;
  margin-bottom: 10rpx;
  flex-shrink: 0;
}
.container-swiper-sc .items .item-img:nth-child(3n+3) {
  margin-right: 0;
}
/* 隱藏scroll-view的滾動條 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}


Page({
  data: {
    currentTab: 0,
    sleft: "", //橫向滾動條位置
    list: [1, 2, 3, 4, 5, 6, 7, 22, 32],//測試列表
  },
  handleTabChange(e) {
    let { current } = e.target.dataset;
    if (this.data.currentTab == current || current === undefined) return;
    this.setData({
      currentTab: current,
    });
  },
  handleSwiperChange(e) {
    this.setData({
      currentTab: e.detail.current,
    });
    this.getScrollLeft();
  },
  getScrollLeft() {
    const query = wx.createSelectorQuery();
    query.selectAll(".item").boundingClientRect();
    query.exec((res) => {
      let num = 0;
      for (let i = 0; i < this.data.currentTab; i++) {
        num += res[0][i].width;
      }
      this.setData({
        sleft: Math.ceil(num),
      });
    });
  },
});

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)滑動/點擊切換Tab的文章就介紹到這了,更多相關(guān)小程序Tab切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論