用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序swiper滑动页面实践-类似于安卓ViewPager

纸飞机 2018-3-6 16:10

作者:overShao,来自原文地址 一言不合,上效果效果一 效果二 效果三 效果四 基本属性属性名 类型 默认值 说明 最低版本 indicator-dots Boolean false 是否显示面板指示点 indicator-color Color rgba(0, 0, 0, .3 ...

作者:overShao,来自

原文地址


一言不合,上效果

效果一

效果二

效果三

效果四

基本属性

属性名 类型 默认值 说明 最低版本
indicator-dots Boolean false 是否显示面板指示点
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色 1.1.0
indicator-active-color Color #000000 当前选中的指示点颜色 1.1.0
autoplay Boolean false 是否自动切换
current Number 0 当前所在页面的 index
interval Number 5000 自动切换时间间隔
duration Number 500 滑动动画时长
circular Boolean false 是否采用衔接滑动
bindchange EventHandle current 改变时会触发 change 事件,event.detail = {current: current}

效果实践

效果一

  1. autoplay="True" class="wx-swiper" indicator-dots="True" interval="2000">
  2. bindtap="tap_d5808da3" class="wx-image" mode="aspectFill" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493698928333&di=99be91f1067ce820af8235607706813a&imgtype=0&src=http%3A%2F%2Fimg.tupianzj.com%2Fuploads%2Fallimg%2F160412%2F9-160412091538.jpg"
  3. />
  4. class="wx-image" mode="aspectFill" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493698928333&di=ae56672831512cc7d4cd1e26d31269aa&imgtype=0&src=http%3A%2F%2Fimg.tupianzj.com%2Fuploads%2Fallimg%2F160412%2F9-160412091540.jpg"
  5. />

wxss样式如下:

  1. .wx-swiper{height: 750rpx; }
  2. .wx-image{width: 100%; height: 100%; }

其中indicator-dots=”True”表示有指示点;interval=”2000”表示自动切换时间间隔。

效果二

底部是一个view来展示当前显示的item,下面是swiper。

    邀请

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏