手把手带你学习微信小程序

2024-07-10 07:50| 来源: 网络整理| 查看: 265

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

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

一、swiper 初体验

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

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

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

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

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

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

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

代码语言：javascript复制 /*我们通过 style 样式把从 js 中传过来的值进行显示，style 和 wxss 一样都可以改变样式，只不过 style 是优先级第二高的，最高的是import 语句*/ image> swiper-item> image> swiper-item> 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 的属性大概有几十个，我只简单的说一下典型的

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

在这里插入图片描述

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

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

【本文地址】

手把手带你学习微信小程序

手把手带你学习微信小程序

今日新闻

推荐新闻