6.小程序自带的轮播

比眉伴天荒 2023-02-17 11:08 20阅读 0赞

#### 小程序自带的轮播 ####

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`

`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%;
    }