属性名 类型 默认值 说明
indicator-dots Boolean false 是否显示面板指示点
autoplay Boolean false 是否自动切换
current Number 0 当前所在页面的 index
interval Number 5000 自动切换时间间隔
duration Number 1000 滑动动画时长
bindchange EventHandle   current 改变时会触发 change 事件,event.detail = {current: current}
 
注意:其中只可放置<swiper-item/>组件,其他节点会被自动删除。
swiper-item
仅可放置在<swiper/>组件中,宽高自动设置为100%。
 
<view class="page">
  <view class="page__hd">
    <text class="page__title">swiper</text>
    <text class="page__desc">swiper</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap swiper">
        <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
            <block wx:for="{{background}}">
                <swiper-item>
                  <view class="swiper-item bc_{{item}}"></view>
                </swiper-item>
            </block>
        </swiper>
    </view>
    <view class="btn-area">
      <button type="default" bindtap="changeIndeicatoirDots">indicator-dots</button>
      <button type="default" bindtap="changeVertical"> {{vertical?'horizontal':'vertical'}}</button>
      <button type="default" bindtap="changeAutoplay">autoplay</button>
    </view>
    <slider bindchange="durationChange" value="{{duration}}" show-value min="500" max="2000" />
    <view class="section__title">duration</view>
    <slider bindchange="intervalChange" value="{{interval}}" show-value min="2000" max="10000" />
    <view class="section__title">interval</view>
  </view>
</view>
 
Page({
  data:{
    background:['green','red','yellow'],
    indicatorDots:true,
    vertical:false,
    autoplay:true,
    interval:3000,
    duration:1200
  },
  changeIndeicatoirDots : function (e) {
    this.setData({
      indicatorDots : !this.data.indicatorDots
    })
  },
  changeVertical : function (e) {
    this.setData({
      vertical: !this.data.vertical
    })
  },
  changeAutoplay: function (e){
    this.setData({
      autoplay:!this.data.autoplay
    })
  },
  durationChange: function (e){
    this.setData({
        duration:e.detail.value
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval:e.detail.value
    })
  }
})

item单击事件

在 swiper-item 上绑定事件,通过 data 自定义标签绑定数据。然后在function中通过event拿到。
<!--main.wxml-->
<view>
<swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
<block wx:for="{{images}}">
<swiper-item bindtap="itemclick" data-id="{{item.id}}" data-name="{{item.name}}">
<image src="{{item.picurl}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
</view>
1234567891011
注意代码中的 data-id 和 data-name 均为自定义标签,然后可以在绑定事件的event中通过 id 和 name 拿到。
// 轮播item点击事件
itemclick: function(e) {
wx.showToast({
title: e.currentTarget.dataset.id + "",
icon: 'success',
duration: 2000
})
},
12345678
注意在绑定的function中可以通过event拿到对应的数据。如:e.currentTarget.dataset.id 对应wxml中的data-id
 
当然,还有另一种办法。不需要绑定事件,通过在每一个的 swiper-item 外面包上一个 a 标签,以超链接的方式跳转页面。
 

滑块视图容器   swiper的更多相关文章

  1. 小程序开发基础-swiper 滑块视图容器

    小编 / 达叔小生 参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/ 小程序开发基础-swiper 滑块视图容器 根 ...

  2. 小程序swiper 滑块视图容器

    属性名 类型 默认值 说明 最低版本 indicator-dots Boolean false 是否显示面板指示点 indicator-color Color rgba(0, 0, 0, .3) 指示 ...

  3. 微信小程序之视图容器(swiper)组件创建轮播图

    一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...

  4. 微信小程序组件解读和分析:三、swiper滑块视图

    swiper滑块组件说明: 滑块视图容器,用于展示图片,可以通过用户拖拽和设置自动切换属性控制图片的切换   组件的使用示例的运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? ...

  5. 微信小程序-视图容器组件

    view 视图容器 例如: <view class="section"> <view class="section__title">fl ...

  6. 微信小程序-组件-视图容器

    1.view 1.作用:类似 html 的 div 用来进行页面布局,具有块级盒子特性. 2.常用属性:设置view盒子点击后的状态,以及控制是否影响父盒子的点击状态 3.eg:<view ho ...

  7. 小程序开发基础-view视图容器

    view 视图容器. // wxml <view class="section"> <view class="section__title"& ...

  8. 微信小程序组件解读和分析:一、view(视图容器 )

    view组件说明:    视图容器    跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部.用起来比较自由随意,没有固定的结构. view组件的用法: 示例项目的wxml ...

  9. 微信小程序之可滚动视图容器组件 scroll-view

    1. 纵向滚动 scroll-y 当 设置为scroll-y 时, 需要将其高度设为固定值 如果整个页面,即最外层标签为scroll-view,需要并将其高度设为100%,也需要将page设为100% ...

随机推荐

  1. rabbitmq (三) 发布/订阅

    rabbitmq的目的并不是让生产者把消息直接发到队列里面去, 这样不能实现解耦的目的,也不利于程序的扩展. 所以就有交换机(exchanges)的概念. 交换机有几种类型:direct, topic ...

  2. 手机App调试(Android)

    方法一:  用Chrome+手机来调试.1) 在PC上安装谷歌的USB驱动:         http://developer.android.com/sdk/win-usb.html#top     ...

  3. expect login ssh

    #!/usr/bin/expect -f set pwffd [lindex $argv 0] spawn ssh cmesvr2i expect "*password:" sen ...

  4. js类的继承,es5和es6的方法

    存在的差异:1. 私有数据继承差异 es5:执行父级构造函数并且将this指向子级 es6:在构造函数内部执行super方法,系统会自动执行父级,并将this指向子级2. 共有数据(原型链方法)继承的 ...

  5. django之 基于queryset和双下划线的跨表查询

    前面篇随笔写的是基于对象的跨表查询:对象.objects.filter(...)  对象.关联对象_set.all(...)  -->反向 基于对象的跨表查询例如: book_obj= Book ...

  6. 彻底解决COM端口被占用(在使用中)问题的办法

    今天就遇到这个问题了串口调试的时候发现usb转串口使用的是COM8而串口调试助手里面只有COM1到4,我想去该COM口发现COM1到7都在使用中,找了好多办法都不行,后面在网上找到这篇解决办法的文章, ...

  7. python 正则表达式 RE模块汇总记录

    re.compile(pattern, flags=0) re.search(pattern, string, flags=0) re.match(pattern, string, flags=0) ...

  8. centos7安装mysql客户端

    1.判断是否已安装 [root@k8s-master master]# which mysql /usr/bin/which: no mysql in (/usr/local/sbin:/usr/lo ...

  9. leetcode312

    class Solution { public int maxCoins(int[] iNums) { int[] nums = new int[iNums.length + 2]; int n = ...

  10. show出相应单据列表

    var Fids=AddGroupItems.Select(o=>Convert.ToString(o["Id"])).ToArray(); string filter=st ...