微信小程序?qū)崿F(xiàn)水平垂直滾動(dòng)

更新時(shí)間：2021年03月16日 14:12:31 作者：火腿腸燒烤大賽冠軍

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)水平垂直滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

要點(diǎn)swiper內(nèi)部套scroll-view

注意：

1.scroll豎直滾動(dòng)高度不能給百分比要給px/rpx
2.swiper內(nèi)部item posiiton定位高度100%
3.swiper高度要給定值
4.如果橫向滾動(dòng)也要給水平的寬度

代碼

xml

<swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
 <swiper-item class="tab-content">
 <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}">
  <view class="cont">
  <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx">
  <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card>
  </view>
  </view>
 </scroll-view>

 </swiper-item>
 <swiper-item class="tab-content">
 <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}">
  <view class="cont">
  <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx">
  <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card>
  </view>
  </view>
 </scroll-view>
 </swiper-item>
 </swiper>

<swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
 <swiper-item class="tab-content">
 <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}">
  <view class="cont">
  <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx">
  <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card>
  </view>
  </view>
 </scroll-view>

 </swiper-item>
 <swiper-item class="tab-content">
 <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}">
  <view class="cont">
  <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx">
  <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card>
  </view>
  </view>
 </scroll-view>
 </swiper-item>
</swiper>

wxss

.tab-box{
 height: 1040rpx;
}
.scroll-height {
height: 1040rpx;
}

js

myAudit(){
 this.setData({
 currentTab:0,
 })
},
myInitiate(){
 this.setData({
 currentTab:1,
 // jiraArray:[]
 })
},
switchTab(event){
 var cur = event.detail.current;
 var singleNavWidth = this.data.windowWidth / 5;
 this.setData({
 currentTab: cur,
 navScrollLeft: (cur - 2) * singleNavWidth
 });
}

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

您可能感興趣的文章:

相關(guān)文章

Javascript的異步函數(shù)和Promise對(duì)象你了解嗎
這篇文章主要為大家詳細(xì)介紹了Javascript異步函數(shù)和Promise對(duì)象，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03
云開(kāi)發(fā)進(jìn)階uniCloud-db組件與JQL語(yǔ)法的轉(zhuǎn)換詳解
這篇文章主要為大家介紹了云開(kāi)發(fā)進(jìn)階uniCloud-db組件與JQL語(yǔ)法的轉(zhuǎn)換詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
JavaScript遞歸算法生成樹(shù)形菜單
這篇文章主要介紹了JavaScript遞歸算法生成樹(shù)形菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
微信js-sdk地理位置接口用法示例
這篇文章主要介紹了微信js-sdk地理位置接口用法,結(jié)合實(shí)例形式分析了js-sdk地理位置接口的定義與簡(jiǎn)單使用方法,需要的朋友可以參考下
2016-10-10
微信小程序嵌入H5頁(yè)面(webview)的基本用法和父子傳參數(shù)詳細(xì)說(shuō)明
微信小程序中嵌入H5頁(yè)面通常指的是在小程序中使用Web-view組件來(lái)加載外部的網(wǎng)頁(yè),下面這篇文章主要給大家介紹了關(guān)于微信小程序嵌入H5頁(yè)面(webview)的基本用法和父子傳參數(shù)的相關(guān)資料,需要的朋友可以參考下
2024-08-08
JavaScript函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別
這篇文章主要介紹了JavaScript函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-06-06
js+css實(shí)現(xiàn)扇形導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了js+css實(shí)現(xiàn)扇形導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
JavaScript實(shí)現(xiàn)字符串與日期的互相轉(zhuǎn)換及日期的格式化
這篇文章主要介紹了JavaScript實(shí)現(xiàn)字符串與日期的互相轉(zhuǎn)換及日期的格式化的方法,這里格式化使用的是正則表達(dá)式來(lái)替換日期后進(jìn)行格式化,需要的朋友可以參考下
2016-03-03
js數(shù)據(jù)類型轉(zhuǎn)換與流程控制操作實(shí)例分析
這篇文章主要介紹了js數(shù)據(jù)類型轉(zhuǎn)換與流程控制操作,結(jié)合實(shí)例形式分析了JavaScript數(shù)據(jù)類型轉(zhuǎn)換與流程控制相關(guān)原理、操作技巧與使用注意事項(xiàng),需要的朋友可以參考下
2019-12-12
JS計(jì)算兩個(gè)時(shí)間相差分鐘數(shù)的方法示例
這篇文章主要介紹了JS計(jì)算兩個(gè)時(shí)間相差分鐘數(shù)的方法,結(jié)合完整實(shí)例形式分析了javascript針對(duì)日期時(shí)間的轉(zhuǎn)換與計(jì)算相關(guān)操作技巧,需要的朋友可以參考下
2018-01-01