|
使用uniapp 的组件?swiper?组件实现，在swiper组件里面添加swiper-item组件是内容盒子
<view class="page-section-spacing">
<swiper class="swiper"
indicator-dots="true"
autoplay="true"
interval="3000"
duration="500" >
<swiper-item v-for="item in list" :key="item.id">
<image :src="item.url" mode="aspectFill"></image>
</swiper-item>
</swiper>
</view>
swiper 的一些常用配置：
| 属性名 | 类型 | 默认值 | 说明 |
|---|
| indicator-dots | Boolean | false | 是否显示面板指示点 | | autoplay | Boolean | false | 是否自动切换 | | current | Number | 0 | 当前所在滑块的 index | | interval | Number | 5000 | 自动切换时间间隔 | | duration | Number | 500 | 滑动动画时长 | | circular | Boolean | false | 是否采用衔接滑动，即播放到末尾后重新回到开头 | | vertical | Boolean | false | 滑动方向是否为纵向 | | easing-function | String | default | 指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic | | @change | EventHandle | | current 改变时会触发 change 事件，event.detail = {current: current, source: source} |
注意：
1.组件名称swiper.vue或者Swiper的话，在传递数据的时候有可能图片就不见了。
2.改变图片的大小要用rpx。
3.swiper组件有默认的高度为150px，app中需要改变默认高度。
配合uni的接口点击预览图片：
const reviewImages = (img) => {
let imgArr = img.split(',');
uni.previewImage({
current: 0,
urls: imgArr,
fail: (err) => {
console.log('报错了');
console.log(err);
},
success: res => {
console.log('成功')
console.log(res);
}
});
}
这是直接预览多张，传入图片数组即可
注：遇到一个问题就是图片不能正常显示，走了 success 的回调但是图片一直转圈不显示，但是在外面的 image 标签的图片正常显示
后来发现在网站打开图片链接，是html格式的不是 图片格式，后端修改一下返回和格式即可。
|