文档章节

微信小程序之轮播图的实现(附效果图和源码)

o
 osc_pn11u1x9
发布于 2018/08/07 00:02
字数 192
阅读 13
收藏 0

精选30+云产品,助力企业轻松上云!>>>

不管是做APP开发还是小程序,移动端离不开轮播图的功能,下面就写一个小程序的轮播图功能分享给大家 ####效果图: carousel.png

step1:页面index.wxml代码

<!--index.wxml-->
<view class="container">
    <!--轮播图-->
  <swiper class="home-swiper" indicator-dots="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for-items="{{lunboData}}">
      <swiper-item>
        <image src="{{item.imgurl}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>
</view>

step2:配置信息

//index.js
Page({
  data: {
    //轮播图配置
    autoplay: true,
    interval: 3000,
    duration: 1200
  },
  onLoad: function () {
    var that = this; 
    var data = {
      "datas": [
        {
          "id": 1,
          "imgurl": "../../images/a1.jpg"
        },
        {
          "id": 2,
          "imgurl": "../../images/a2.jpg"
        },
        {
          "id": 3,
          "imgurl": "../../images/a3.jpg"
        },
        {
          "id": 4,
          "imgurl": "../../images/a4.jpg"
        }
      ]
    }; 
    that.setData({
      lunboData: data.datas
    })
  }
})

step3:样式文件

/**index.wxss**/

/*轮播控件*/

.home-swiper {
  width: 95%;
  height: 360rpx;
}

.slide-image {
  width: 100%;
  height: 100%;
}

######GitHub项目源代码及下载地址:轮播图

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
微信小程序电商实战-商品详情(上)

先看一下今天要实现的小程序商品详情页吧! 商品详情.gif 本期我们要实现小程序商品详情页的头部标题、头部轮播、商品详情浮动按钮和商品内页布局。 一、设置头部标题 如上图所示,头部标题是...

osc_wff1160a
2018/07/23
4
0
微信小程序----相对路径图片不显示

出现场景 在本地调试的时候本地图片显示,但是手机浏览的时候本地图片不显示。 出现图片不显示的原因 小程序只支持网络路径和base64的图片。图片转base64在线工具 处理方法 将图片都放到服务器...

osc_evi50j4g
2018/07/27
26
0
基于SpringBoot前后端分离的点餐系统

基于SpringBoot前后端分离的点餐系统   开发环境:主要采用Spring boot框架和小程序开发     项目简介:点餐系统,分成卖家端和买家端。买家端使用微信小程序开发,实现扫码点餐、浏览...

osc_ea6pnve7
05/06
11
0
基于SpringBoot前后端分离的点餐系统

基于SpringBoot前后端分离的点餐系统   开发环境:主要采用Spring boot框架和小程序开发     项目简介:点餐系统,分成卖家端和买家端。买家端使用微信小程序开发,实现扫码点餐、浏览...

osc_el4lxnyg
05/06
12
0
基于SpringBoot前后端分离的点餐系统

基于SpringBoot前后端分离的点餐系统   开发环境:主要采用Spring boot框架和小程序开发     项目简介:点餐系统,分成卖家端和买家端。买家端使用微信小程序开发,实现扫码点餐、浏览...

HHH燕
2019/11/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

浅谈对python pandas中 inplace 参数的理解

这篇文章主要介绍了对python pandas中 inplace 参数的理解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 pandas 中 inplace 参数在很多函数中都会有,它的作用是:是否...

Linux就该这么学
刚刚
0
0
C++ 从基本数据类型说起

前言 int 在32位和64位操作系统,都是四个字节长度。为了能编写一个在32位和64位操作系统都能稳定运行的程序,建议采用std::int32_t 或者std::int64_t指定数据类型。*与long随操作系统子长变...

osc_sxdofc9c
1分钟前
0
0
游戏音乐的作用以及起源

游戏音乐是由特殊的音乐、语言符号、美学符号组成,在电子游戏的发展下,游戏音乐越来越成熟,游戏音乐与美术相融合,能够带给玩家视觉与声音的感官冲击,形成游戏音乐所具有的独特的审美效果...

奇亿音乐
1分钟前
0
0
2020,最新Model的设计-APP重构之路

很多的app使用MVC设计模式来将“用户交互”与“数据和逻辑”分开,而model其中一个重要作用就是持久化。下文中设计的Model可能不是一个完美的,扩展性强的model范例,但在我需要重构的app中,...

osc_mfzkzkxi
1分钟前
0
0
面对职业瓶颈,iOS 开发人员应该如何突破?

我们经常看到 iOS 开发人员(各种能力水平都有)的一些问题,咨询有关专业和财务发展方面的建议。 这些问题有一个共同点:前面都会说“我现在遇到了职业困境”,然后会问一些诸如“我是否应该...

osc_gfpedeca
3分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部