小程序觸摸滑動(dòng)切換內容_網(wǎng)絡(luò )編程_奇迪科技(深圳)有限公司(m.cheanjie.com)
1.使用scroll-view組件,
<!--垂直滾動(dòng),這里必須設置高度-->
<scroll-view scroll-y="true" style="height: 200px">
<view style="background: red; width: 100px; height: 100px" ></view>
<view style="background: green; width: 100px; height: 100px"></view>
<view style="background: blue; width: 100px; height: 100px"></view>
<view style="background: yellow; width: 100px; height: 100px"></view>
</scroll-view>
<!-- white-space
normal: 正常無(wú)變化(默認處理方式.文本自動(dòng)處理?yè)Q行.假如抵達容器邊界內容會(huì )轉到下一行)
pre: 保持HTML源代碼的空格與換行,等同與pre標簽
nowrap: 強制文本在一行,除非遇到br換行標簽
pre-wrap: 同pre屬性,但是遇到超出容器范圍的時(shí)候會(huì )自動(dòng)換行
pre-line: 同pre屬性,但是遇到連續空格會(huì )被看作一個(gè)空格
inherit: 繼承
-->
<!--水平滾動(dòng)-->
<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >
<!-- display: inline-block-->
<view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
<view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
</scroll-view>
2.使用swiper,WXML文件中寫(xiě)入下面代碼,即可實(shí)現左右滑動(dòng)切換:
<view >
<swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab"
style="height:{{winHeight}}rpx">
<swiper-item wx:for="{{[0,1,2,3,4,5,6,7]}}">
<scroll-view scroll-y="true" class="scoll-h" >
這里是左右滑動(dòng)切換展示的內容
</scroll-view>
</swiper-item>
</swiper>
</view>
在WXSS文件中,編寫(xiě)自己的樣式。
本文版權所有,轉載須注明:來(lái)源 http://m.cheanjie.com/qvdv-oop-812.html