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

时间:2022-12-06 01:08

小程序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>

标签:
随便看看
本类推荐
本类排行
热门标签

我国国家通讯社行不行啊细狗新年贺词祝福语2023年祝福语新年新年贺词新年贺词祝福语居家抗病毒小药箱除夕高速免费吗2022年除夕高速免费吗春联春联句子大全春联句子大全七字年夜饭十二道菜年夜饭十二道菜单年夜饭吃什么年夜饭吃什么菜吃年夜饭的寓意年夜饭黑芝麻菊花茶晒菊花茶腌腊肉送妈妈生日礼物汉白玉送闺蜜水钻送女人礼物爸爸生日送礼物送老公