小程序实践（二）：swiper组件实现轮播图效果

番茄西红柿发布于2019-04-23 13:34 / 1810人阅读

摘要：组件类似于中的，实现类似轮播图的效果，相对于的实现起来更加方便，快捷。

swiper组件类似于Android中的ViewPager，实现类似轮播图的效果，相对于Android的Viewpager,swiper实现起来更加方便，快捷。

效果图：

首先看下swiper支持的属性：

------------------------------------------------------------------------------------

具体实现轮播功能：

一、添加轮播图片素材

　　在项目根目录下新建一个目录用于存储图片资源，目录名随意

二、页面目录下的js文件添加数据源

　　　在data属性里添加imgs列表，列表item项为图片在项目中的位置（关键：红色加粗部分代码）

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgs:["../../images/aaa.jpg","../../images/bbb.jpg","../../images/ccc.jpg"]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

　三、视图文件构建

　　 1、在页面目录下的wxml 文件中编写代码

用到知识点：列表渲染、swiper组件

class="container">
  
    true autoplay=true interval=3000 duration=200 circular=true bindtap=clickSwiper>
      for="{{imgs}}" wx:key:="*this">
        
          "{{item}}"  class="slide-image" mode=aspectFill data-index="{{index}}">

四、关于swiper的点击事件

　　点击每一个item，可以知道点击的是哪个并作出相应的操作

从第三步可以看到，对于组件，设定了一个bindtap属性，属性值内容对应页面下js的方法

在页面下的 .js文件中添加对应的点击方法：

效果图：

--------------------------------------------------------------------------------------

小程序实践（一）：主页tab选项实现

小程序实践（二）：swiper组件实现轮播图效果

小程序实践（三）：九宫格实现及item跳转

小程序实践（四）：动态控制组件的显示/隐藏

小程序实践（五）：for循环绑定item的点击事件

小程序实践（六）：view内部组件排版

小程序实践（七）：页面间传值

小程序实践（八）：验证码倒计时功能

小程序实践（九）：返回到上一个界面并传值回去

小程序实践（十）：textarea实现简单的编辑文本界面

小程序实践（十一）：showModal的使用

小程序实践（十二）：七牛云上传图片

云服务器 GPU云服务器 react实现轮播图轮播图写轮播图将轮播图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2057.html

微信小程序实现类3D轮播图

摘要：在写微信小程序时，有写到实现轮播图的效果，可以直接使用微信小程序中自带的组件来实现效果图如下的相关属性是否显示小圆点，也可以自己重新设置小圆点是否衔接滑动，就是实现无限滚动与上一张图片的间距与下一张图片的间距实现自动滚动这里主要利用了在写微信小程序时，有写到实现3D轮播图的效果，可以直接使用微信小程序中自带的组件swiper来实现效果图如下： showImg(https://seg...

DDreach 2019-08-23 11:34 评论0 收藏0
小程序实践（三）：九宫格实现及item跳转

摘要：效果图实现效果图红色线包含部分的九宫格效果，并附带点击时间。效果图：实现效果图红色线包含部分的九宫格效果，并附带item点击时间。 ------------------------------------------------------------------------------------------------------ 具体实现： 1、首先添加图片资源文件　在...

番茄西红柿 2019-04-23 13:34 评论0 收藏0
爱奇艺小程序陪你嗨一夏

摘要：只要滑动了就会触发，并且有一个代表当时滑动到第几个。可能有一点笨笨的。前言在炎热的夏天里最美滋滋的事情是什么呢，我觉得当然是宅在家里，吹着空调，吃着零食看电视剧电影里的帅气小哥哥、漂亮小姐姐了！在闲暇时光我会经常用爱奇艺小程序看视频，加上现在已经学习了一段时间小程序了，啪，动手模仿一个爱奇艺视频小程序的念头就产生了。虽然现在还是个小白，但是希望在这趟爱奇艺小程序之旅上为各位乘客朋友...

edagarli 2019-08-22 18:05 评论0 收藏0
vue轮播图插件之vue-awesome-swiper

摘要：移动端轮播图插件，在使用图形界面插件中的组件无法实现触摸滑动后，转而使用插件安装我这里安装的是下面的这个版本使用全局导入样式的话，我这里有用到分页器，就在全局中引入了样式组件引入在中使用常见的小圆点移动端轮播图插件，在使用iview图形界面插件中的carousel组件无法实现触摸滑动后，转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesom...

binta 2019-08-23 12:00 评论0 收藏0