方案一:满屏
/*wxml*/
<swiper style='width:100%;height:100%;' current='{{current}}' bindchange='bindChange'>
切记是行内样式
/*wxss*/
swiper-item {
overflow: scroll;
}
ok完美解决!
方案二:半屏
这个才是重点,小二,上酸菜!!
这个就不能行内设置height:100%;了,要根据元素节点动态设置高,红框中的是我的循环元素,要获得每个swiper-item的高
//js
get_wxml: function (className, callback){
wx.createSelectorQuery().selectAll(className).boundingClientRect(callback).exec()
},
wx.request({
url: baseUrl + 'm=wttapi&a=getcategories',
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
success: function(res) {
console.log(res)
that.setData({
scrollNav: res.data.data[1],
scrollContent: res.data.data[2],
indexTit: res.data.data[1][0].name
})
let change_id = that.data.scrollNav[that.data.idx].cid//动态获取每个swiper-item元素节点的id
that.setData({
swiper_length: that.data.scrollNav.length-1//获取节点数量
})
//获取节点信息
that.get_wxml(`#cont${change_id}`,(rects)=>{
that.setData({
height:rects[0].height
})
})
}
})
/*wxml*/
<swiper style='width:100%;height:{{height}}px;background:#F5F5F5;' current='{{current}}' bindchange='moveSwiper'>
<swiper-item wx:for='{{scrollNav}}' wx:for-item='item' wx:key='index' class='swiper_content' item-id='{{item.cid}}'>
<!-- <view class='loading'>
<image src='/images/loading.gif'></image>
<text>努力加载中</text>
</view> -->
<view id='cont{{item.cid}}'>
<view wx:for='{{scrollContent}}' wx:key='index' id='cont{{item[0].pcid}}'>
<view class='content-title'>
<image src='/images/lefticon@2x.png'></image>
<text style='display:inline-block;margin:0 10rpx;'>{{item[0].pcname}}</text>
<image src='/images/righticon@2x.png'></image>
</view>
<view class='content-box'>
<view wx:for='{{scrollContent[index]}}' wx:key='index' class='content-box-list' data-id='{{item.ccid}}' data-name='{{item.name}}' bindtap='intoList'>
<image src='{{item.image}}' style='max-width:160rpx;max-height:160rpx;'></image>
<view class='content-box-price'>
<view>
<text class='price-text1 fontweight'>{{item.name}}</text>
<text class='price-text2'>今日最值</text>
</view>
<text class='price-text3'>{{item.price}}</text>
</view>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
ok,小白一枚,以上两种方案是小程序初步踩坑经验