不管什么项目,一个轮播是基本少不了的,现在就来踩下微信小程序的swiper吧!

首先打开文档,可以看到下面这些参数:(https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html)

后面有详细的解说,我就不一一说了!主要看下面的!

<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
变量设置在data当中

将默认的宽高去掉,然后给个样式! 默认指示点是为false的,我们要改成true 修改指示点的颜色:
indicator-color="white" indicator-active-color="#cccccc"
 
一个简单的轮播就好了!
 
 

小程序swiper配置参数使用的更多相关文章

  1. 微信小程序swiper高度自适应,swiper的子元素高度不固定

    小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...

  2. 微信小程序环境配置和开发!!

    1.登陆微信公众平台小程序,下载 普通小程序开发者工具.或者 小游戏开发者工具. 2.新建项目需要填以下几点,然后初始demo如下,注意rpx是分成750份的单位. 3.点击预览,用微信扫描二维码,代 ...

  3. 小程序swiper实现订单页面

    小程序swiper实现订单页面 myOrder.wxml <!--pages/myorder/myorder.wxml--> <view class="swiper-tab ...

  4. 微信小程序swiper实现 句子控app首页滑动卡片

    微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...

  5. 技术干货 | 轻松两步完成向 mPaaS 小程序传递启动参数

    前言 在部分场景下,需要向小程序的默认接收页(pages/index/index)传递参数. 本文将以传递 name 和 pwd 参数为例,分别介绍此场景在 Android 小程序和 iOS 小程序中 ...

  6. 微信小程序-全局配置、组件、页面跳转、用户信息等

    全局配置 三个页面 app.json pages字段 "pages":[ "pages/index/index", # 首页 "pages/home/ ...

  7. 基于angular实现模拟微信小程序swiper组件

    这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组 ...

  8. 关于小程序swiper不显示图的那些事

    还有几天快过年了,在这里提前祝大家新年快乐! 今天没事研究了一下小程序,想整个轮播图玩玩,然后开始看看文档https://mp.weixin.qq.com/debug/wxadoc/dev/compo ...

  9. 【原创】2、小程序域名配置之申请支持SSL(https)

    要把一个网站对接进小程序,一.网站的域名必须通过备案(ICP备案).在买域名的时候,各个域名服务商都有提供相应的备案平台,可以方便的提交备案.工信部官网:http://www.miitbeian.go ...

随机推荐

  1. [Contest20180325]序列

    Hogura有一个序列$a$,她希望你帮她维护下面的这些操作. $1\ l\ r\ x$对$l\leq i\leq r$的$a_i$执行$a_i=a_i+x$ $2\ l\ r\ x$对$l\leq ...

  2. 【二分答案】【最短路】bzoj1614 [Usaco2007 Jan]Telephone Lines架设电话线

    对于二分出的答案x而言,验证答案等价于将所有边权>x的边赋成1,否则赋成0,然后判断从1到n的最短路是否<=K. #include<cstdio> #include<cs ...

  3. HDU 3389 Game(博弈)

    Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. Word如何设置单元格垂直居中

    那两个上面是水平居中,下面是垂直居中.

  5. SSL和TSL的区别【转】

    SSL由从前的网景公司开发有1,2,3三个版本,但现在只使用版本3 TLS是SSL的标准化后的产物 有1.0 1.1 1.2三个版本 默认使用1.0 TLS1.0和SSL3.0几乎没有区别 事实上我们 ...

  6. Matlab自带的曲线拟合程序

    这个函数的功能是能自动搜索参数的取值,从而使得方程的误差最小. 效果如下 代码如下 %% Optimal Fit of a Non-linear Function % This is a demons ...

  7. JS向后台传递json数组对象

    var Obj = []; //一下代码可以循环插入 var returnObj = new Object();//创建一个对象 returnObj.id = “123”: returnObj.mon ...

  8. Gitlab系列九之取消用户注册页面和删除用户

    一.取消用户注册页面 Admin Area--->Settings--->Sign-up enabled(取消前面的勾)---save 二.删除用户 Users----Destroy(点他 ...

  9. [转载] 在Linux中,开机自动运行普通用户的脚本程序

    FROM:http://blog.csdn.net/sinboy/article/details/2466225 FROM:http://www.2cto.com/os/201006/50680.ht ...

  10. 微信小程序 - 上传图片纯前端(多张、单张)

    演示如下 可能有些命名不太规范,到时改一下即可 点击从github拉取:图片上传示例