如何使用微信小程序制作banner轮播图?
在前端工程师的工作中,banner是必不可少的,那缺少了DOM的小程序是如何实现banner图的呢?如同其他的框架封装了不同的banner图的方法,小程序也封装了banner的方法,来让我一一道来:
一:准备工作
我用两张图吧,如下所示:
1.jpg 2.jpg
二:编写xsml代码(即html)
在这里我们要是用<swiper></swiper>标签来进行包裹,他有如下属性:
这些属性足够我们使用,我们为了是xsml页面简洁,所以我在这里使用了for循环,将使用到的资源放进js中进行循环。而且为了使数据可进行双向绑定,所以他的属性值我打算放到js中进行配置。我的xsml代码如下:
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true"> <block wx:for="{{arr}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="355" height="150"/> </swiper-item> </block>
</swiper>
三:js的配置
由于是双向绑定,所以我们只要在js中进行配置需要的参数即可。由于我的两张图片使用的是1.jpg和2.jpg,所以我只需要在js中进行一个小小的循环即可,这个分情况而定,你么也可以把图片的地址直接放到数组里面;最后改好了之后记得setData一下,,不然没效果,js代码如下:
Page({/*** 页面的初始数据*/data: {mode:"scaleToFill",arr:[],indicatorDots: true,autoplay: true,interval: 2000,duration: 1000,},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var array = this.data.arrfor (let i = 1; i < 3; i++) {array.push("img/" + i + ".jpg")}this.setData({ arr: array})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},})
好了,,我们来看一下最终效果:
一些小的细节点还需要大家自己去调一下xsss的代码。
如何使用微信小程序制作banner轮播图?相关推荐
- 微信小程序实现banner轮播图
一:准备工作 准备轮播的两张图. 二:编写xsml代码(即html) 在这里我们要是用<swiper></swiper>标签来进行包裹,他有如下属性: 这些属性足够我们使用,我 ...
- php实现轮播图代码,微信小程序实例:轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
- 微信小程序:swiper轮播图添加外层圆角
微信小程序:swiper轮播图添加外层圆角 .swiper-wrap{overflow: hidden;border-radius: 8rpx;box-sizing: border-box;width ...
- 微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法 小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
- 微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度的方法...
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- 微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- 微信小程序之swiper轮播图
微信小程序,一个不是app胜似app的开发工具,更加准确的说是开发途径,给非专业开发app的同学们提供了一个绝妙的选择 轮播图几乎是每一个网站.app必有得一个展示区,用于醒目自己的特点.特色.了解微 ...
- 微信小程序实现3D轮播图
在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现 效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重 ...
- 微信小程序开发 | 02 - 轮播图实现(swiper组件)
一.实现思路 轮播图基于微信小程序提供的swiper组件(文档)实现. swiper组件中使用到下列属性: display-multiple-items:同时显示的滑块数量 current:当前所在滑 ...
最新文章
- 利用WiFi模块实现MicroPython远程开发
- 零基础自学python的建议-如何从零基础自学Python?
- 程序的跟踪debug
- linux_mint语言卡住,使用linux mint 16的容易死机怎么处理?
- 神经网络与深度学习——TensorFlow2.0实战(笔记)(五)(NumPy科学计算库<1>python)
- C#软件设计——小话设计模式原则之:接口隔离原则ISP
- Alpha版本发布说明
- 一种DC-DC转换器的分析
- lwip---(六)ARP表
- Java 方法重载和覆盖重写的区别及注意事项
- 如何设置局域网内的固定IP地址?
- 解决vscode下载慢的问题
- 皮皮虾视频抓包去水印教程原理
- 软件测试中的版本控制
- 微软面向大众市场发布Office 2010
- 在vue里引入使用Ag-grid表格插件
- linux 更新系统时间
- 鲁菜泰斗同和居 日坛新店用上便民新科技
- 译文Deep Learning in Bioinformatics --深度学习在生物信息学领域的应用(1)
- ArrayDeque集合的妙用
热门文章
- java word 批注_Java 添加Word批注(文本、图片)
- Java文本控件型号_小博老师解析Java核心技术 ——JSwing文本型控件
- python画三角形并涂色_如何用python画叠加三角形?
- 用Dijkstra算法找到图上两点之间的最短路径
- constantlayout布局
- 从零开始搭建博客Hexo-Node-Git搭建博客
- 百度天气预报API接口的一个坑
- CSU - 1655 文本计算器
- vue 报错vue : 无法加载文件 D:\wjx_tools\node\node_global\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsof
- C#界面设计--5--Bitmap.save保存图片时: GDI+ 中发生一般性错误 解决办法