相思资源网 Design By www.200059.com
本文实例讲述了微信小程序入门之广告条实现方法。分享给大家供大家参考,具体如下:
在小程序页面,有时候需要弄一条广告条进去,作用可以用来提醒客户端,更加醒目,这种实现很容易,要用到组件swiper,navigator
先上效果图:
wxml:
<swiper class="swiper_container" autoplay="true" interval="2000" circular="true"> <block wx:for="{{msgList}}"> <navigator url="服务器" open-type="navigate"> <swiper-item> <view class="swiper_item">{{item.title}}</view> </swiper-item> </navigator> </block> </swiper>
js:
Page({ data: { msgList: [ { url: "url", title: "公告11:这是一条公告,效果是每个x秒,会向右滑动," }, { url: "url", title: "公告22:这里是向右滑动。。。。" }, { url: "url", title: "公告33:啊哈哈微信小程序,。。。" } ] } })
WXSS:
.swiper_container { background-color:rgb(255, 255, 255); height:40px; //可以改变背景颜色(background-color),或者字体颜色(color) }
虽然这段代码很容易理解, 但是这种效果是非常实用的
希望本文所述对大家微信小程序开发有所帮助。
标签:
微信小程序,广告条
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无微信小程序入门之广告条实现方法示例的评论...