不管什么项目,一个轮播是基本少不了的,现在就来踩下微信小程序的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. java 获取系统信息及CPU的使用率(转)

    java 获取系统信息及CPU的使用率 原文:http://kakaluyi.javaeye.com/blog/211492 最近做个项目,就是要取得cpu占有率等等的系统信息,一开始以为要用动态链接 ...

  2. Problem D: 零起点学算法40——多组测试数据(求和)IV

    #include<stdio.h> int main() { int n,i,sum,a; ) { sum=; ;i<=n;i++) { scanf("%d",& ...

  3. JNI之Hello World!

    基本流程: 1. 创建一个类(HelloWorld.java)2. 使用 javac 编译该类3. 利用 javah -jni 产生头文件4. 用本地代码实现头文件中定义的方法5. Run 备注:在一 ...

  4. docker常用命令 状态图

    http://blog.csdn.net/permike/article/details/51879578

  5. iOS面试_1.浅析内存管理

    为了开学的面试,就在博客里总结一下面试会问到的问题,今天就来谈谈内存管理,看到一篇文章非常不错,http://vinceyuan.cnblogs.com/,深入浅出,推荐大家去看看! Objectiv ...

  6. php之防注入程序绕过浅谈

    <?php/*判断传递的变量是否含有非法字符如:$_POST/$_GET功能:SQL防注入系统*/ //屏蔽错误提示error_reporting(7); //需要过滤的字符 $ArrFiltr ...

  7. Python数据整合与数据准备-BigGorilla应用

    一.前言 要应用BigGorilla框架对应数据进行数据的处理与匹配,那么首先要下载Anaconda安装,下载地址:https://www.continuum.io/downloads Anacond ...

  8. Spark(十) -- Spark Streaming API编程

    本文测试的Spark版本是1.3.1 Spark Streaming编程模型: 第一步: 需要一个StreamingContext对象,该对象是Spark Streaming操作的入口 ,而构建一个S ...

  9. JAVA利用HttpClient进行POST请求(HTTPS)

    目前,要为另一个项目提供接口,接口是用HTTP URL实现的,最初的想法是另一个项目用jQuery post进行请求. 但是,很可能另一个项目是部署在别的机器上,那么就存在跨域问题,而JQuery的p ...

  10. docker集群——初识Swarm

    为Docker构建原生的集群管理工具的计划早在2014年初就开始了,当时作为一个通信协议项目,称为Beam.之后,它被实现为一种后台程序,使用Docker API来控制异构化的分布式系统.项目重新命名 ...