全国服务热线:4008-888-888

行业新闻

小程序开发如何_微信小程序入门之广告条完成方

微信小程序入门之广告条实现方法示例       这篇文章主要介绍了微信小程序入门之广告条实现方法,涉及微信小程序基于swiper与navigator组件的文字信息滑动展示相关操作技巧,需要的朋友可以参考下

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

在小程序页面,有时候需要弄一条广告条进去,作用可以用来提醒客户端,更加醒目,这种实现很容易,要用到组件swiper,navigator

先上效果图:

wxml:

 swiper autoplay="true" interval="2000" circular="true" 
 block wx:for="{{msgList}}" 
 navigator url="服务器" open-type="navigate" 
 swiper-item 
 view {{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)

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

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




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服