文档章节

微信小程序swiper滑块视图容器控件使用整理

tianma3798
 tianma3798
发布于 2018/10/25 16:09
字数 378
阅读 83
收藏 0

一、默认使用

indicator-dots,指示是否面板显示

indicator-color,指示点颜色

indicator-active-color,选中指示点颜色

wxml代码:

<swiper autoplay="{{autoplay}}"
  indicator-dots='true'
  indicator-active-color='red'
  interval="3000" 
  duration="1000">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150" />
    </swiper-item>
  </block>
</swiper>

js代码:

  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    autoplay: true,
  },

显示结果:

二、重定义,指示点样式

操作:禁用默认指示样式,自定义view显示,根据当前current,设置选中项

1.wxml定义

<view class='swiper'>
  <swiper autoplay="{{autoplay}}"
    bindchange="swiperChange"
   current='{{curIndex}}' interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" width="355" height="150" />
      </swiper-item>
    </block>
  </swiper>
  <!-- 自定义指示 -->
  <view class='dots'>
    <view class='dot {{curIndex==index?"active":""}}' wx:for="{{imgUrls}}"></view>
  </view>
</view>

2.js定义

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    autoplay: false,
    interval: 5000,
    duration: 1000,
    curIndex: 0
  },

3.css样式定义


.swiper {
  position: relative;
}

.swiper image {
  width: 100%;
}

.swiper .dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20rpx;
  display: flex;
  justify-content: center;
}

.swiper .dots .dot {
  margin: 0 8rpx;
  width: 14rpx;
  height: 14rpx;
  background: #fff;
  border-radius: 8rpx;
  transition: all 0.6s;
}

.swiper .dots .dot.active {
  width: 24rpx;
  background: red;
}

3.显示样式

 

更多:

微信小程序selectComponent获取自定义子组件

 微信小程序组件间通信(二)

微信小程序组件间通信(一)

 

© 著作权归作者所有

tianma3798
粉丝 16
博文 151
码字总数 44714
作品 0
济南
高级程序员
私信 提问
js时间函数getTime() 在苹果手机上返回NaN的问题

一、出现问题 获取到的时间戳,在Android手机正常,在IPhone中返回NaN。 问题说明: 在苹果手机上时间格式使用“/” 隔开表示。 苹果手机必须这样写,必须用'/'的格式。(安卓手机也可以使用...

tianma3798
2018/11/18
42
0
小程序Canvas生成图片draw()出现黑屏问题/不完整,安卓概率大

在当前小程序版本中对于Canvas空间绘制图片,存在bug,效率比较低。 导致图片回执完成慢。出现黑屏。 解决方案: 在调用draw(),绘制成功后,延迟使用绘制结果。例如:500毫秒后,输出图片内容...

tianma3798
2018/12/05
180
0
统一服务消息返回错误:{"errcode":40165,"errmsg":"invalid weapp pagepath hint: [bsAWua0201ge30]"}

{"errcode":40165,"errmsg":"invalid weapp pagepath hint: [bsAWua0201ge30]"} 原因:pagepath参数为所需跳转到小程序的具体页面路径,支持带参数,(示例index?foo=bar), 以前配置的是:m......

tianma3798
2018/12/14
292
0
小程序开发基础-swiper 滑块视图容器

小编 / 达叔小生 参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/ 小程序开发基础-swiper 滑块视图容器 根据官方文档,在自己的程序上运行,并打进代码的效果图...

达叔小生
2018/08/29
0
0
微信小程序原生组件swiper在mpvue工程中使用注意事项

时下微信小程序开发框架中mpvue是主流的选择之一。其中,免不了还要使用部分小程序原生的组件。swiper组件几乎成为典型小程序界面的必备组成组件之一。但是,我在试用中遇到一个典型问题,很...

googlingman
2018/12/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

linux 安装mysql 8.0.17

网上找教程,靠谱的不多,不过找到一个,直接转载把。每一步的错误简直一模一样。

朝如青丝暮成雪
刚刚
0
0
contos7 修改密码

一:开始重启按e 二:按↓,找到linux16开头的那一段 ,在最后加上 init=/bin/sh 按 Ctrl+X 启动 三:输入 mount -o remount, rw / 四:输入 passwd root 然后系统会提示输入密码并重复一次 ...

避难所
1分钟前
0
0
线性表——顺序表的实现与讲解(C++描述)

线性表 引言 新生安排体检,为了 便管理与统一数据,学校特地规定了排队的方式,即按照学号排队,谁在前谁在后,这都是规定好的,所以谁在谁不在,都是非常方便统计的,同学们就像被一条线(...

BWH_Steven
2分钟前
0
0
米联客 ZYNQ/SOC 精品教程 S05-CH01利用IBERT进行GTX信号眼图测试

软件版本:VIVADO2017.4 操作系统:WIN10 64bit 硬件平台:适用米联客 ZYNQ系列开发板 米联客(MSXBO)论坛:www.osrc.cn答疑解惑专栏开通,欢迎大家给我提问!! 1.1概述 Vivado中提供了1种I...

msxbo
5分钟前
0
0
openssl从PFX导出私钥、公钥

0.1392017.09.11 09:03:42字数 791阅读 3594 数字证书文件格式(cer和pfx)的区别 PFX是带有私钥的证书(包含公钥和私钥) 由Public Key Cryptography Standards #12,PKCS#12标准定义,包含...

宸明
5分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部