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

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

一、swiper 初体验

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

1.1 前期准备

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

1.2 项目框架

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

  1. index.wxml
<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
图片来自网上,可能过一段时间就不是上面所展示的图片,所有代码均在最新版的微信开发者工具编译通过,所以是可以直接使用的

<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
保证图像的正常显示

.swiper image{
  width: 100%;
  height: 100%;
}

(3)index.js
动态的获取手机的信息

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),多的就不在这里一一介绍了,有兴趣的同学可以查看官方文档自己都试一试

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

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值