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

相关文章

来自专栏韩东吉的Unity杂货铺

零基础入门 15: UGUI Button

按钮对于一个应用或者游戏来说。必不可少,今天这篇分享,来说下UGUI里的按钮,Button组件。

1241
来自专栏pangguoming

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

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

4885
来自专栏Python

HTML基础

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

2045
来自专栏Python攻城狮

pycharm快捷键及一些常用设置

1. pycharm默认是自动保存的,习惯自己按ctrl + s 的可以进行如下设置:

873
来自专栏我的博客

JQuery事件处理

Jquery事件 1、  绑定事件示例代码: <a href=”#”>绑定事件</a> <div style=”display:none;”> 什么是绑定事件?...

3065
来自专栏无所事事者爱嘲笑

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

7302
来自专栏腾讯云商业智能分析团队的专栏

普通表格常见设置

表格组件是以表格的形式展现数据的载体,表格可以绑定任意一查询的多个字段。根据是否给字段使用统计函数来区分,可划分为细节数据表格和汇总表格。

1571
来自专栏前端儿

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

1112
来自专栏happyJared

IDEA快捷键拆解系列(十五):经验篇

  本文整理了一些博主本人在学习工作中比较常用到的快捷键,有需要的可以参考一下,也欢迎留言补充。

971
来自专栏我的博客

JQuery中DOM操作[续]

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

2546

扫码关注云+社区