小程序 banner 的使用

还记得之前的博客写到了沉浸状态栏的首页吗？为什么要沉浸状态栏，因为设计师说首页最顶部要放自动滚动的banner，还好微信官方给了一个滑动组件，下面就简单介绍一下吧。

先看看效果

按设计师要求，就是一个banner，但是指示器达不到要求，随手写了个。

官方文档

主要用到了 swiper 组件，详细内容看官方文档

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

看看代码

WXML

<view class="banner"><swiper class="swiper" autoplay="{{true}}" interval="{{2000 * banners.length}}" duration="{{2000}}"bindchange="onSwiperChange"><block wx:for="{{banners}}" wx:key="banners"><swiper-item><van-image width="100%" height="600rpx" src="{{banners[index].src}}" data-index="{{index}}"bind:click="onClickBanner" /></swiper-item></block></swiper><view wx:if="{{banners.length>1}}" class="indicator-containrer row-center"><view class="indicator" wx:for="{{banners}}" wx:key="indicator"style="width:{{index==currentIdicater?'28':'12'}}rpx;opacity:{{index==currentIdicater?'0.64':'0.32'}};margin-left:{{index==0&&0}}rpx"></view></view>
</view>

东西都没什么，就是要注意下 interval 这个值是整个播放过程的时间。

WXSS

.banner {height: 600rpx;position: relative;
}.swiper {width: 100%;height: 100%;
}.row-center{display:flex; flex-direction:row;align-items: center;
}.indicator-containrer {position: absolute;bottom: 164rpx;width: 686rpx;height: 12rpx;margin: 0 32rpx;
}.indicator {width: 12rpx;height: 12rpx;background: #FFFFFF;border-radius: 6rpx;opacity: 0.16;margin-left: 12rpx;
}

样式也简单，就是注意调整一下指示器的位置，我这是按设计图调的。

Page.js

Component({...data:{...banners: [],currentIdicater: 0, // banner的指示器}...methods: {// 监听页面变化onSwiperChange(e) {//e.detail = {current, source}this.setData({currentIdicater: e.detail.current})},}
})

代码里面把banner数组加上就行，里面存放图片链接，至于获取数据、数据的格式看需要吧。

结语

banner就这么简单

end

完美撒花

小程序 banner 的使用相关推荐

小程序banner广告和激励广告
小程序banner广告和激励广告 1.小程序banner广告 1.1.先要在小程序公众后台获取广告位ID 代码片 <view class="empty"><ad ...
小程序banner广告点击触发事件技术
现如今,小程序是遍布各大平台(微信,QQ,百度,抖音...),随着小程序的增多,流量也显得越来越珍贵,买量的钱是越来越多,除去靠小程序业务营收的(如商城)和靠小程序服务营收的(外卖,服务等),很大部分 ...
mfc程序转化为qt_智慧虎超：小程序如何为珠宝行业助力？低频商品的高频转化你懂吗...
小程序发展各行各业都通过搭建自己的小程序平台尝到了流量红利带来的甜头,而珠宝作为消费者的低频需求如何才能借着小程序发展的东风让订单蹭蹭蹭往上涨呢? 打造具有品牌辨识度的小程序小程序的设计要具有品牌的 ...
微信小程序广告组件全量开放，开发者可轻松开通
昨日晚间,微信官方宣布,小程序(包括小游戏)的广告组件已经全量开放,开发者可在后台自助申请开通流量主,然后就能在小程序里接入广告,按月获得广告收入. 小程序流量主的开通门槛很低,只需小程序累计独立访问 ...
微信小程序的广告方式有哪些
之前小木和大家介绍了小程序的朋友圈广告功能,紧接着就收到小伙伴的咨询:除了朋友圈广告,小程序在微信中还有其他广告入口吗?答案是肯定的,今天接着来和大家介绍小程序在微信生态中的广告方式都有哪些. 微信小 ...
小程序广告主和流量主相关
一.广告主 1. 开通条件:需通过微信认证,已完成微信认证的公众号可到公众平台申请开通广告主服务 2. 创建小程序广告:https://jingyan.baidu.com/article/acf728 ...
如何开通小程序广告流量主
小程序广告流量主是微信平台开放给所有小程序运营者的一项广告商业能力,不限制个人主体小程序.在满足平台规定的准入条件后,就可以线上自助申请开通流量主,通过接收投放广告位来获取广告变现盈利.那么,平台设有 ...
车企小程序，汽车行业新战场【产品分析报告】
一.威马汽车威马汽车有多款小程序:威马积分商城.威马会员中心.威马汽车超级试驾.威马EXE续航挑战赛.威马试驾报告.威马汽车全民试驾,本文针对其中几个小程序进行分析. 1. 威马汽车全民试驾用户可 ...
基于微信小程序的ACG文化交流平台
摘要随着信息化时代的到来,并伴随着ACG文化的广泛普及,文化交流也在朝着线上交流宣传的方式发展.近些年来随着ACG文化的广泛普及,人们对ACG文化也逐渐的了解与认可.甚至是喜爱.对于ACG文 ...

小程序 banner 的使用

先看看效果

官方文档

看看代码

结语

小程序 banner 的使用相关推荐

最新文章

热门文章