使用uniapp 的组件 swiper 组件实现,在swiper
组件里面添加swiper-item
组件是内容盒子
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>
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格式的不是 图片格式,后端修改一下返回和格式即可。