小程序swiper怎么根据页面长度滑动

小程序swiper怎样根据页面长度滑动

小程序swiper根据页面长度滑动的案例：

在对应的js文件中添加以下代码:

get_wxml:function(className,callback){
wx.createSelectorQuery().selectAll(className).boundingClientRect(callback).exec()
},
//获得节点信息
this.get_wxml(`#cont`+current,(rects)=>{
console.log(rects)
letnewHeight=rects[0].height
this.setData({
heights:newHeight
})
})

在对应的wxml文件中添加以下代码：

<viewclass="goods_info_box">
<viewclass="tba_contain">
<!--导航栏-->
<scroll-viewclass="tab"scroll-xscroll-left="{{tabScroll}}"scroll-with-animation="true">
<blockwx:for="{{menuList}}"wx:key="index">
<viewclass="tab-item{{currentTab==index?'active':''}}"data-current="{{index}}"bindtap='clickMenu'style="width:{{100/menuList.length}}%">
<text>{{item.name}}</text>
</view>
</block>
</scroll-view>
<!--页面-->
<swiperclass="list_content"duration="500"current="{{currentTab}}"bindchange="changeContent"style="height:{{heights}}px">
<swiper-itemclass="content-item"wx:for="{{menuList}}"wx:key="index">
<view>
<textclass='reason_txt'>{{item.name}}</text>
</view>
<viewid='cont{{index}}'class="swiper-com"style="color:#000;font-size:40rpx;">
<rich-textnodes="{{item.content}}"></rich-text>
</view>
</swiper-item>
</swiper>
</view>
</view>

本文来源：https://www.yuntue.com/post/79919.html | 云服务器网，转载请注明出处！