如何使用微信小程序制作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.arr
for (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轮播图?的更多相关文章
- 微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- mpvue微信小程序怎么写轮播图,和官方微信代码的差别
目前用mpvue很多第三方的ui库是引入不了的,因为它不支持含有dom操作. 那我们要做轮播图的话一个是手写另外一个就是用小程序的swiper组件了: 官方代码: <swiper indicat ...
- 【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片
业务需求: 3个图片轮番播放,可以左右滑动,点击指示点可以切换图片 index.wxml: 这里使用小程序提供的<swiper>组件autoplay:自动播放interval:自动切换时 ...
- 微信小程序-swiper(轮播图)抖动问题
ps:问题 组件swiper(轮播图)真机上不自动滚动 一直卡在那里抖动 以前遇到这个问题,官方一直没有正面回复.就搁置了,不过有大半年没写小程序了也没去关注,今天就去看了下官方文档,发觉更新了点好东 ...
- 用JavaScript制作banner轮播图
JavaScript_banner轮播图 让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...
- 全栈项目|小书架|微信小程序-首页水平轮播实现
首页效果 首页功能主要有 搜索(下篇文章介绍) 图书列表 图书列表 分析一波: 列表是水平滑动 点击列表会有按压效果:布局整体缩小 每个布局的信息从上到下排列分别是:图片.书名.作者.出版社 每个布局 ...
- 微信小程序之 3d轮播(swiper来实现)
以前写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin ...
- [vuejs短文]使用vue-transition制作小小轮播图
提示 本文是个人的一点小笔记,用来记录开发中遇到的轮播图问题和vue-transition问题. 会不断学习各种轮播图添加到本文当中 也有可能会上线,方便看效果 开始制作 超简易呼吸轮播 简单粗暴的使 ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
随机推荐
- centos修改ip mac等
CentOS修改mac http://www.haowlan.com/jishuluntan/488.html CentOS 修改IP地址, DNS, 网关 http://www.21andy.com ...
- 教程-TObjectList.Clear、TStringList.Clear方法对象有没有被释放
相关资料: http://www.cnblogs.com/rogge7/p/4631796.html delphiTStringList通过AddObject方法添加对象. object里存的只是指向 ...
- 迭代获取ViewState
string s=""; System.Collections.IDictionaryEnumerator ie=ViewState.GetEnumerator(); while ...
- Ubuntu 下查看中文man手册方法
转载自:http://blog.chinaunix.net/uid-24830506-id-3266493.html Ubuntu 中文man手册安装方法 分类: LINUX Ubuntu 下查看中文 ...
- Tomcat 添加为系统服务 开机自动启动
http://jingyan.baidu.com/article/a65957f4b12b8724e77f9b5a.html Tomcat是Apache 软件基金会(Apache Software F ...
- poll--wait for some event on a file descriptor
poll同select,用于监控file descriptor事件,推荐用poll的升级版epool来实现功能,但在简单应用中使用poll更方便. #include <poll.h> in ...
- ASP.NET中上传图片检测其是否为真实的图片 防范病毒上传至服务器
一.需求 我们在用.net开发网站时,经常会用到图片上传,可以说是每个网站必备的,大到门户网站,电商网站,政务系统,OA系统,小到企业网站,个人网站,博客网站,导航网站等等,都有用到图片上传,那么在客 ...
- 常见JVM监控工具用法介绍
VisualVM是一种集成了多个JDK命令行工具的可视化工具,它能为您提供强大的分析能力.所有这些都是免费的!它囊括的命令行工具包括jps,jstat,jmap,jinfo,jstack,JConso ...
- Hbase 学习(二)各种filter
各种filter 今天的主题是Filter,hbase客户端查询的时候,自定义查询filter. 直接上例子吧,不多说别的了,第一个例子是RowFilter的. Scan scan = new Sca ...
- 20个优秀的JavaScript 键盘事件处理库
键盘事件是 Web 开发中最常用的事件之一,通过对键盘事件的捕获和处理可以提高网站的易用性和交互体验.下面,我们向大家介绍收集的20款优秀的 JavaScript 键盘事件处理库,帮助开发人员轻松处理 ...