首页 > 课堂 > 小程序 > 正文

微信小程序入门之广告条实现方法示例

2020-03-21 16:05:20
字体:
来源:转载
供稿:网友

本文实例讲述了微信小程序入门之广告条实现方法。分享给大家供大家参考,具体如下:

在小程序页面,有时候需要弄一条广告条进去,作用可以用来提醒客户端,更加醒目,这种实现很容易,要用到组件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)}

虽然这段代码很容易理解, 但是这种效果是非常实用的

希望本文所述对大家微信小程序开发有所帮助。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表