温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-08-22 01:49:47 来源:脚本之家 阅读:168 作者:玩家296508754 栏目:web开发

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

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

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

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI