swiper

微信小程序实现轮播图,和网站,APP的效果差不多,代码少,效率高。

先来看看效果图:

  

  

主要用swiper + swiper-item来实现

  1. <view class='swiper'>滑块视图容器</view>
  2.  
  3. <!--
  4. indicator-dots='true' 是否显示指示点 默认 false
  5. indicator-color:指示点颜色
  6. indicator-active-color:选中的指示点颜色
  7. autoplay:是否自动切换 默认:false
  8. interval:自动切换时间间隔
  9. duration:滑动动画时长
  10. vertical 是否改成纵向, 默认 false
  11. -->
  12.  
  13. <swiper indicator-dots='true' indicator-color='gray' indicator-active-color='green' autoplay='true' interval='5000' duration='500'>
  14. <block wx:for="{{imgUrl}}">
  15. <swiper-item class="item_image">
  16. <image src='{{item}}' class='swiper_image' mode="aspectFill"></image>
  17. </swiper-item>
  18. </block>
  19.  
  20. </swiper>

一个简单的小案例,轮播图,代码简洁,功能强大。

  源码点击下载

微信小程序------轮播图的更多相关文章

  1. 图解微信小程序---轮播图

    图解微信小程序---轮播图 代码笔记 第一步:在页面创建swiper组件 第二步:编写js页面 注意事项:wx:for渲染我们js中的图片数组,item默认写法,获取我们的图片数组中的图片,可通过增加 ...

  2. 微信小程序——轮播图实现

    小程序的轮播图,也就是他其中的一个控件可以算是直接上代码: 这是WXML 页面 代码: <view class='carousel_div'> <swiper class=" ...

  3. 微信小程序轮播图的制作与跳转

    <!--轮播图 --> <view class='swiperBanner'> <swiper indicator-dots='{{indicatorDots}}' au ...

  4. 微信小程序--轮播图,标题,盒子,tab栏的合成例子

    小程序是什么? 微信小程序,是一种不需要下载安装即可使用的应用,用户扫一扫或搜一下即可打开应用,在微信-发现-小程序可打开应用. 一.小程序的样式编写: 目录结构: app.json { " ...

  5. 微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应

    官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...

  6. 微信小程序轮播图

    swiper标签 <!--index.wxml--> <swiper class="swiper" indicator-dots="true" ...

  7. 一分钟学会如何自定义小程序轮播图(蜜雪冰城Demo)

    最近开发小程序项目用到了轮播图,默认的有点单调,作为后端程序员,研究一番最终实现了.本文会从思路,代码详细介绍,相信读过此文后,不管以后在开发中碰到轮播图还是需要自定义修改其他的样式都可以按这个思路解 ...

  8. 02微信小程序-轮播的宽度100%显示和轮播的基础配置

    1==>如何让轮播的宽度100%显示? 你先给swiper 外面添加一个大盒子,给大盒子一个类 . <view class='lunbobox'> 然后wxss 里面设置 image ...

  9. 微信小程序轮播组件

    在index.wxml中添加以下代码 <view> <swiper indicator-dots="{{indicatorDots}}" autoplay=&qu ...

随机推荐

  1. linux 下路由配置

    转自 https://www.cnblogs.com/kevingrace/p/6490627.html 在日常运维作业中,经常会碰到路由表的操作.下面就linux运维中的路由操作做一梳理:----- ...

  2. JS根据userAgent值来判断浏览器的类型及版本【转】

    转自:http://blog.csdn.net/sunlovefly2012/article/details/22384255 JavaScript是前端开发的主要语言,我们可以通过编写JavaScr ...

  3. Java分布式:消息队列(Message Queue)

    Java分布式:消息队列(Message Queue) 引入消息队列 消息,是服务间通信的一种数据单位,消息可以非常简单,例如只包含文本字符串:也可以更复杂,可能包含嵌入对象.队列,是一种常见的数据结 ...

  4. 300. Longest Increasing Subsequence(LIS最长递增子序列 动态规划)

    Given an unsorted array of integers, find the length of longest increasing subsequence. For example, ...

  5. shell 脚本中双引号 单引号 反引号 的区别

    转自:http://blog.csdn.net/iamlaosong/article/details/54728393 最近要编个shell脚本处理数据,需要检测数据文件是否存在,文件名中包含日期,所 ...

  6. Please check registry access list (whitelist/blacklist)

    https://blog.csdn.net/sprita1/article/details/51735566

  7. AJAX跨域问题解决方法(4)——调用方解决跨域

    调用方解决跨域的方法只有一种,那就是隐藏跨域. 何为隐藏跨域? 隐藏跨域的核心思路是通过反向代理隐藏跨域以欺骗浏览器 什么是反向代理?反向代理是指通过中间服务器使得访问同一个域名的两个不同url最终会 ...

  8. Spring使用事务

    Spring使用事务,一共有4个步骤 1.配置数据源 例如: <bean id="dataSource" class="com.mchange.v2.c3p0.Co ...

  9. Jquery12 Ajax

    学习要点: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax()方法 6.表单序列化 Ajax ...

  10. Could not reserve enough space for 1572864KB object heap

    This problem might be caused by incorrect configuration of the daemon.For example, an unrecognized j ...