小程序实践(二):swiper组件实现轮播图效果

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组件

<view class="container">
  <view >
    <swiper indicator-dots='true' autoplay='true' interval='3000' duration='200' circular='true' bindtap='clickSwiper'>
      <block wx:for="{{imgs}}" wx:key:="*this">
        <swiper-item>
          <image src="{{item}}"  class="slide-image" mode='aspectFill' data-index="{{index}}"></image>
        </swiper-item>
      </block>
    </swiper>
  </view>
</view>

    四、关于swiper的点击事件

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

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

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

        效果图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Theo Tsao

Ionic3学习笔记(五)动画之使用 animate.css

animate.css 是一款强大的、跨浏览器的预设CSS3动画库,内置了很多典型的CSS3动画,兼容性好使用方便,可以应用于我们的基于Ionic3的Hybr...

901
来自专栏Zachary46

为Github项目说明添加优美标签

大家在Github上看项目的时候,是不是经常在项目介绍README.md里看到这种高大上的标签,以下截取自开源库OkGo的README.md。

1165
来自专栏二进制文集

Java 虚拟机面试题全面解析(干货)

本文固定链接:https://www.zybuluo.com/Yano/note/321063 本文 PDF 下载:http://download.csdn....

802
来自专栏张善友的专栏

ASP.NET 主题(Themes)FAQ

1、主题是什么 主题由一组元素组成:外观、级联样式表 (CSS)、图像和其他资源。主题将至少包含外观。主题是在网站或 Web 服务器上的特殊目录中定义的。主题...

1815
来自专栏君赏技术博客

自定义输入框造轮子大法ZHAddressTextFiled

这个输入框是输入把默认提示语上移,我记得有第三方库,但是我就想造轮子,所以就除了这个。

733
来自专栏游戏杂谈

Base64编码的字符串与图片的互转

用Flex写了一个例子,图片(暂时仅支持png、jpg/jpeg)转成base64编码的字符串(默认取上传文件的后缀名,然后添加了“data:image/(pn...

231
来自专栏别先生

Server Tomcat v7.0 Server at localhost failed to start.

1:这里记录一下这个错误,反正百度一大推,但是很长很长,我感觉这个问题肯定是servlet引起的,因为我遇到的总是如此: ? 2:我的问题如下所示: 1 <se...

2858
来自专栏IT民工生存指南

从0开始Vue.js 和 Webpack 4 [1]

1325
来自专栏前端人人

React第三方组件4(状态管理之Reflux的使用③TodoList中)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

3174
来自专栏mukekeheart的iOS之旅

iOS学习——自动定位

  最近在项目中需要做自动定位功能,就是你在参加会议通过扫描二维码签到的时候自动定位并将你的定位信息在签到中上传,这样可以避免我们进行假签到。在这个功能中,主要...

40210

扫码关注云+社区