微信小程序广告轮播图的创设,微信小程序实战篇

广告轮播图差相当少各种小程序都会用到的,所以有不能缺少讲明一下,老规矩,先看功能图,其实不看自身信赖我们也都知情,拿出去讲就是让我们熟习一下小程序基础控件swiper的品质

哈喽,我们好,前日总于挤出时间,写第二篇啦,自从决定写作品才开掘时间都相当不够用啊,废话十分少说,我们直接进去正题吧!先想起一下上篇小说,我们上课了底部导航栏和顶上部分导航栏的制作,我们应该都回忆把,基本上电商小程序都会带尾巴部分当导航栏,所以尾巴部分导航栏应当要会哦~,明天啦,作者将教我们另贰个亟须会的,banner
图的创建,也叫广告轮播图,就是大家平日来看首页自动轮播的那么些控件。

图片 1效果图.gif

先上效果让大家过过瘾,是还是不是很熟谙,别急,看完那篇小说,你也能够轻易制作出如此的效能。

swiper属性介绍

属性名 作用 参数值
indicator-dots 是否显示面板指示点 true/false 默认是false
indicator-color 指示点颜色 默认值rgba(0, 0, 0, .3)
indicator-active-color 当前选中的指示点颜色 默认颜色#000000
autoplay 是否自动切换 true/false 默认是false
interval 自动切换时间间隔 number 默认是5000
duration 滑动动画时长 number 默认是500
vertical 滑动方向是否为纵向 true/false 默认是false
bindchange current 改变时会触发 change 事件,event.detail = {current: current, source: source}

图片 2广告轮播图.gif笔者可能把广告轮播图写在
home 的页面里了,需求改动的页面有home.js、home.wxml、home.wxss

广告轮播图效果的落实

一、wxml分界面的兑现

<view class='title-line'>swiper</view><!-- banner --><swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" vertical="{{isVertical}}" duration="{{duration}}" circular='false'> <swiper-item wx:for="{{imgUrls}}"> <image src="{{item}}" /> </swiper-item></swiper>滑动进度条控制滚动过度时间<slider bindchange="durationChange" show-value min="500" max="2000"/><view class='line'></view> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" vertical="{{true}}" duration="{{duration}}" circular='true'> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" /> </swiper-item> </block></swiper> 

分界面完成轻易,运用小程序封装的控件swipe就足以轻巧完毕,为了相比效果,作者生成了多个广告轮播图,三个是横行滚动,贰个是纵向滚动

二、xxx.js属性的主宰

Page({ data: { // banner imgUrls: [ 'http://7xnmrr.com1.z0.glb.clouddn.com/red.png', 'http://7xnmrr.com1.z0.glb.clouddn.com/yellow.png', 'http://7xnmrr.com1.z0.glb.clouddn.com/green.png' ], indicatorDots: true, //是否显示面板指示点 autoplay: true, //是否自动切换 interval: 3000, //自动切换时间间隔,3s duration: 1000, // 滑动动画时长1s }, durationChange:function { this.setData({ duration: e.detail.value }) },

js中的属性笔者都在代码中注释了,想要改造属性,直接改造对应的值就好,durationChange是用来调节滑动动画时间长度的,通过滑行进程条就能够

三、wxss样式

* 直接设置swiper属性 */swiper { height: 400rpx;}swiper-item image { width: 100%; height: 100%;}

别小看这几行代码,代码君从前为了设置轮播图从满显示器,找了好久,才设置成功的,平日采用的时候,把上边代码拷贝进去就行,顶多去设置一下swiper的万丈

今日周二,所以疏解的内容也正如少,相信大家看贰遍,大致就学的几近啦,最终祝我们周日乐呵呵~

home.wxml

连带小说推荐:微信小程序实战篇-购物车

图片 3

 <!-- banner --> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" /> </swiper-item> </block> </swiper>
建了叁个小程序技能交换群,想入群的读者请加微信

图片 4小程序入群.png

swiper 是微信自带的视图,大家直接使用就好,记住 <swiper>
里面必须要含有 <swiper-item>,你用自定义的 view
是不行的,上面介绍一下以此控件的常用属性,

  • indicator-dots 是或不是出示面板提醒点
  • autoplay 是不是自动切换
  • interval 自动切换时间间隔
  • duration 滑动动画时间长度

余下的
wx:for,已经得以算老调重弹了,差不离每篇都会遇见,所以就一带而过不讲了,不懂的融洽查询前边几篇文章,

home.wxss

/* 直接设置swiper属性 */swiper { height: 300rpx;}swiper-item image { width: 100%; height: 100%;}

home.js

// banner imgUrls: [ 'http://mz.djmall.xmisp.cn/files/banner/20161219/148211980641.png', 'http://mz.djmall.xmisp.cn/files/banner/20161222/148238831285.png', 'http://mz.djmall.xmisp.cn/files/banner/20161222/14823895573.png' ], indicatorDots: true, //是否显示面板指示点 autoplay: true, //是否自动切换 interval: 3000, //自动切换时间间隔,3s duration: 1000, // 滑动动画时长1s

home.js
便是数额了,imgUrls、indicatorDots、autoplay、interval、duration那些个字段在
home.wxml 都有使用,不理解的看注释,已经写的很通晓了

剩余的布局都以css的底蕴啦,我就坐落此处统一讲,先上效果图

图片 5成效图.png大家接下去要做的布局正是广告轮播图下边包车型客车品牌馆模块布局、以致新品上架那一个模块的布局

home.wxml

 <!-- 分类导航 --> <view > <block wx:for-items="{{navItems}}" wx:key="name"> <view catchtap="catchTapCategory" data-type="{{item.name}}" data-type> <image src="{{item.imageurl}}" /> <text>{{item.name}}</text> </view> </block> </view> <view ></view> <view > <view > <text >新品上架</text> <view ></view> <image src="{{newgoods_head_url}}"></image> </view> <scroll-view scroll-x="true"> <view > <block wx:for-items="{{goodsItems}}" wx:key="name"> <view catchtap="catchTapCategory" data-type="{{item.name}}" data-type> <image src="{{item.imageurl}}" /> <text>{{item.name}}</text> <p>{{item.newprice}}</p> </view> </block> </view> </scroll-view> </view>

发表评论

电子邮件地址不会被公开。 必填项已用*标注