手把手带你学习微信小程序 —— 八 （swiper组件 轮播图的实现）

2021-12-08 20:47:30 浏览数 (1)

swiper 组件

  • 一、swiper 初体验
    • 1.1 前期准备
    • 1.2 项目框架
    • 1.3 项目源码
  • 二、swiper 属性

配套官方文档学习，效果更佳呦 —— 传送门

一、swiper 初体验

在日常的使用 app 的过程中，大家一定遇到过这样的情况，今天就带领大家手动写一个这样的轮播图

1.1 前期准备

  1. 首先就是图片，这些图片我都是在网上随便找的，但是经过样式修改后，图片的效果并不是那么的好，所以图片的选择还是挺重要的
  2. 然后新建一个小程序项目，只保留 index.wxml，index.js，index.wxss文件
  3. 查阅微信官方的 API ，找到 wx.getSystemInfoSync();【异步获取手机的基本信息，比如尺寸，宽度，等等一些需要我们手动适配的信息】

1.2 项目框架

swiper 是微信特有的一个轮播图片的容器，里面的子元素必须是 swiper-item 组件

  1. index.wxml
代码语言：javascript复制
<swiper>
  <swiper-item>
	/*视图容器 1*/
  swiper-item>

  <swiper-item>
	/*视图容器 2*/
  swiper-item>

  <swiper-item>
	/*视图容器 3*/
  swiper-item>
swiper>

这就是一个 swiper 组件的基本框架样式，然后一些基本的属性设置就直接在 swiper 中设置即可，这得根据官方文档来设置

  1. index.wxss 这里样式基本就是设置图片的宽度和高度
  2. index.js （划重点） 这里是比较重要的一环，因为不同的手机的尺寸是不一样的，如果我们要针对每个手机进行适配，就需要用到微信官方给的自动获取手机信息的 API 【 wx.getSystemInfoSync();】,动态的获取。然后就可以保证大部分的手机看上去都是一样的效果

1.3 项目源码

效果就是 1.1 中所展示的 （1）index.wxml 图片来自网上，可能过一段时间就不是上面所展示的图片，所有代码均在最新版的微信开发者工具编译通过，所以是可以直接使用的

代码语言：javascript复制
<swiper class='swiper' autoplay indicator-dots indicator-active-color='#ffff' style='width:{{width*2}}rpx;height:{{height*2}}rpx'>
/*我们通过 style 样式 把从 js 中传过来的值进行显示，style 和 wxss 一样都可以改变样式，只不过 style 是优先级第二高的，最高的是import 语句*/
  <swiper-item>
    <image src='http://img4.imgtn.bdimg.com/it/u=2278879561,3737093311&fm=26&gp=0.jpg'>image>
  swiper-item>

  <swiper-item>
    <image src='http://img2.imgtn.bdimg.com/it/u=764840399,4286068159&fm=26&gp=0.jpg'>image>
  swiper-item>

  <swiper-item>
    <image src='http://img2.imgtn.bdimg.com/it/u=3742159581,4163680569&fm=26&gp=0.jpg'>image>
  swiper-item>
swiper>

（2）index.wxss 保证图像的正常显示

代码语言：javascript复制
.swiper image{
  width: 100%;
  height: 100%;
}

（3）index.js 动态的获取手机的信息

代码语言：javascript复制
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取手机相关的信息，通过调用 微信的api 即可实现
    var systemInfo = wx.getSystemInfoSync();
    var width = systemInfo.windowWidth;
    var height = width/4;//图片显示的效果就是长是宽的四倍
    //这是必要的一步，我们需要把动态获取的参数，从后台传到 前段
    this.setData({
      width:width,
      height:height
    })
  },

})

在 index.wxml 中 swiper 可以通过一些属性改变一些交互式的体验，接下来我就把几个用的比较多的给大家简要的介绍一下

二、swiper 属性

swiper 的属性大概有几十个，我只简单的说一下典型的

  1. autoplay —— 自动播放的属性，为布尔值，可以实现自动轮转的效果，常与 interval（单位 为毫秒） 配合，
    • interval：一般设置为 3000 ，即3s比较合适
    • circular：也是布尔值，这个描述起来可能会比较抽象，但是也是一个很好提高交互式体验的属性，按照正常情况，上面的代码只显示了三个图片，第三个自动播放完，会往回显示，也就是显示第二个图片，加上这个属性之后，图片就会直接回到第一个进行循环显示
    • duration：图片切换的一个视觉属性，默认为 500ms，即0.5s
  2. 轮播图小点，主要有三个属性配合使用
    • indicator-dots ：为布尔值，是否显示该小点
    • indicator-color：为指示点的颜色，看下面这个图，被选中的即为白色，未被选中的就是相同的颜色，可以通过该属性修改未被选中的颜色的值
    • indicator-active-color：被选中的小点应该显示的颜色，也就是图中白色的点

主要就是这两个，后面的属性，基本就和事件绑定到一起了，还有的属性是设置 第一次显示的图片的属性 （current），多的就不在这里一一介绍了，有兴趣的同学可以查看官方文档自己都试一试

今天的内容到这里就结束了

微信 官方文档 javascript

0 人点赞