小程序自带的轮播
swiper:
1.显示小圆点 indicator-dots="{{ true }}"(还自带下拉刷新样式，只是样式)
2.自动轮播 autoplay="{{ true }}"
3.轮播时间 interval="{{ 1000 }}"
4.衔接滑动 circular="{{ true }}"
swiper-item:
1.新版本的key不可以.
2.凡是属性要想当成变量，就用{{}}
3.如果数据中图片是路径时，要拼接上 http://localhost:3000
4.image标签默认有个240px的高度(可以改)，所以图片会被压缩，使用mode属性
5.mode属性：
(1)缩放模式：
[1].scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
[2].aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
[3].aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
[4].widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
[5].heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
(2)裁剪模式：
[6].top 裁剪模式，不缩放图片，只显示图片的顶部区域
[7].bottom 裁剪模式，不缩放图片，只显示图片的底部区域
[8].center 裁剪模式，不缩放图片，只显示图片的中间区域
[9].left 裁剪模式，不缩放图片，只显示图片的左边区域
[10].right 裁剪模式，不缩放图片，只显示图片的右边区域
[11].top left 裁剪模式，不缩放图片，只显示图片的左上边区域
[12].top right 裁剪模式，不缩放图片，只显示图片的右上边区域
[13].bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域
[14].bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域
6.swiper也有一个150px的默认高度
7.布局要么就用弹性盒布局、要么就用rpx结构
8.真机兼容性适配，使用rpx进行机型适配，可以根据屏幕宽度进行自适应，
1px = 2rpx，保证是iphone6的设计稿，量出多少rpx就是多少rpx，设计稿一般是750rpx的分辨率
不用rem(rpx效果与rem一样)，小程序中不支持rem单位(rem等比缩放，分辨率越小的机型rem值越低)
wxml
<swiper
indicator-dots="{{ true }}"
autoplay="{{ true }}"
interval="{{ 1000 }}"
circular="{{ true }}"
>
<swiper-item wx:for="{{ bannerList }}" wx:key="index" >
<image src="{{ 'http://localhost:3000' + item.url }}" mode="widthFix"></image>
</swiper-item>
</swiper>
js
Page({
data: {
// 轮播图
bannerList: []
},
// 1.生命周期函数--监听页面加载
onLoad: function (options) {
// Ajax请求(很像jQuery)
wx.request({
url: 'http://localhost:3000/recommends',
data:{
},
success:(res)=>{
this.setData({
bannerList: res.data
})
}
})
}
})
wxss
swiper {
height: 300rpx;
}
swiper-item image {
width: 100%;
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/4560.html
