小程序实践(二):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 条评论
登录 后参与评论

相关文章

来自专栏前端儿

CSS布局 -- 左侧定宽,右侧自适应

14820
来自专栏macOS 开发学习

一步一步,开始上手Mac 开发(三)

1.1 先选中MasterViewController.xib,重新调整view 的尺寸和排列内部的各个控件,(以你喜欢的方式)让控件看起来更协调,而且能够全部...

12320
来自专栏Android干货

安卓开发-设置RadioButton的点击效果

36270
来自专栏python学习路

一、HTML

html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,...

1.8K40
来自专栏无所事事者爱嘲笑

react-native flatlist 上拉加载onEndReached方法频繁触发的问题

1K20
来自专栏林冠宏的技术文章

Golang 编写的图片压缩程序,质量、尺寸压缩,批量、单张压缩

目录:   前序   效果图   简介   全部代码 前序: 接触 golang 不久,一直是边学边做,边总结,深深感到这门语言的魅力,等下要跟大家分享是最近...

962100
来自专栏pangguoming

使用svgdeveloper 和 svg-edit 绘制svg地图

目录: 1. 描述 2. 准备工作 3. 去除地图模板上的水印(可跳过) 4. 方法一、SVGDeveloper 5. 方法二、SVG-Edit 1. 描述 有...

60250
来自专栏郭耀华‘s Blog

NetBeans的(默认)快捷键

NetBeans的(默认)快捷键 1、完成代码:ctrl+\ //任何地方按下此组合键,均会提示相应的参考字段;  2、错误提示:alt + enter /...

30460
来自专栏我的博客

JQuery中DOM操作[续]

10、设置和获取HTML、文本和值示例代码 <p title=”选择你喜欢的水果?”><b>选择你喜欢的水果?</b></p> <form action=”” ...

26860
来自专栏Python

HTML基础

一 html html结构 ? !DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档 <html></html>是文档的...

22950

扫码关注云+社区

领取腾讯云代金券