小程序
小游戏
企业微信
微信支付
扫描小程序码分享
要实现这种的轮播效果,宽度是后台返回的,循环衔接轮播,可以实现每个swiper-item单独设置宽度吗?
<swiper-item wx:for="{{list}}" wx:key="index" style="width: {{item.width}}rpx;"></swiper-item>
这样设置行内样式无效啊
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
自行实现swiper吧。官方的swiper达不到你要的这个效果
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
Page({
data: {
currentIndex: 0
},
changeSwiper(e) {
this.setData({
currentIndex: e.detail.current
})
}
src='https://qiniu-image.qtshe.com/00e93901213fb80e6d600e1e38d12f2eb8389441.jpg'
<view class="container">
<swiper
circular
class="swiper"
onChange="changeSwiper"
previous-margin="140rpx"
next-margin="140rpx"
>
<block wx:for="{{4}}" wx:key="index">
<swiper-item class=" {{currentIndex == index ? 'swiperItemActive': 'swiperItem'}}">
<image
class="imageItem {{currentIndex == index ? 'active': ''}}"
</image>
</swiper-item>
</block>
</swiper>
</view>
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
自行实现swiper吧。官方的swiper达不到你要的这个效果
Page({
data: {
currentIndex: 0
},
changeSwiper(e) {
this.setData({
currentIndex: e.detail.current
})
}
})
src='https://qiniu-image.qtshe.com/00e93901213fb80e6d600e1e38d12f2eb8389441.jpg'
<view class="container">
<swiper
circular
class="swiper"
onChange="changeSwiper"
previous-margin="140rpx"
next-margin="140rpx"
>
<block wx:for="{{4}}" wx:key="index">
<swiper-item class=" {{currentIndex == index ? 'swiperItemActive': 'swiperItem'}}">
<image
src='https://qiniu-image.qtshe.com/00e93901213fb80e6d600e1e38d12f2eb8389441.jpg'
class="imageItem {{currentIndex == index ? 'active': ''}}"
>
</image>
</swiper-item>
</block>
</swiper>
</view>