我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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

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

创新互联主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、营销推广、网站程序开发、HTML5响应式重庆网站建设手机网站开发、微商城、网站托管及成都网站维护、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为三维植被网行业客户提供了网站营销服务。

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

先上效果图:

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

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

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

wxml:


   
    
     
      {{item.title}}
     
    
   

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)
}

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

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


文章名称:微信小程序入门之广告条实现方法示例
文章源于:http://mswzjz.cn/article/pjjppd.html

其他资讯