微信小程序?qū)崿F(xiàn)水平垂直滾動
更新時間：2021年03月16日 14:12:31 作者：火腿腸燒烤大賽冠軍
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)水平垂直滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)水平垂直滾動的具體代碼，供大家參考，具體內(nèi)容如下
要點swiper內(nèi)部套scroll-view
注意：
1.scroll豎直滾動高度不能給百分比要給px/rpx
2.swiper內(nèi)部item posiiton定位高度100%
3.swiper高度要給定值
4.如果橫向滾動也要給水平的寬度
代碼
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
});
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Javascript的異步函數(shù)和Promise對象你了解嗎
這篇文章主要為大家詳細(xì)介紹了Javascript異步函數(shù)和Promise對象，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
云開發(fā)進(jìn)階uniCloud-db組件與JQL語法的轉(zhuǎn)換詳解
這篇文章主要為大家介紹了云開發(fā)進(jìn)階uniCloud-db組件與JQL語法的轉(zhuǎn)換詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了JavaScript遞歸算法生成樹形菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了微信js-sdk地理位置接口用法,結(jié)合實例形式分析了js-sdk地理位置接口的定義與簡單使用方法,需要的朋友可以參考下2016-10-10
微信小程序嵌入H5頁面(webview)的基本用法和父子傳參數(shù)詳細(xì)說明
微信小程序中嵌入H5頁面通常指的是在小程序中使用Web-view組件來加載外部的網(wǎng)頁,下面這篇文章主要給大家介紹了關(guān)于微信小程序嵌入H5頁面(webview)的基本用法和父子傳參數(shù)的相關(guān)資料,需要的朋友可以參考下2024-08-08
JavaScript函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別
這篇文章主要介紹了JavaScript函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
這篇文章主要為大家詳細(xì)介紹了js+css實現(xiàn)扇形導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript實現(xiàn)字符串與日期的互相轉(zhuǎn)換及日期的格式化
這篇文章主要介紹了JavaScript實現(xiàn)字符串與日期的互相轉(zhuǎn)換及日期的格式化的方法,這里格式化使用的是正則表達(dá)式來替換日期后進(jìn)行格式化,需要的朋友可以參考下2016-03-03
js數(shù)據(jù)類型轉(zhuǎn)換與流程控制操作實例分析
這篇文章主要介紹了js數(shù)據(jù)類型轉(zhuǎn)換與流程控制操作,結(jié)合實例形式分析了JavaScript數(shù)據(jù)類型轉(zhuǎn)換與流程控制相關(guān)原理、操作技巧與使用注意事項,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了JS計算兩個時間相差分鐘數(shù)的方法,結(jié)合完整實例形式分析了javascript針對日期時間的轉(zhuǎn)換與計算相關(guān)操作技巧,需要的朋友可以參考下2018-01-01