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


Posted in Javascript onDecember 05, 2018

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

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

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

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

Javascript 相关文章推荐
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
leaflet的开发入门教程
Nov 17 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
Vue实现本地购物车功能
Dec 05 #Javascript
node和vue实现商城用户地址模块
Dec 05 #Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 #Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 #Javascript
详解angularjs4部署文件过大解决过程
Dec 05 #Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 #jQuery
关于RxJS Subject的学习笔记
Dec 05 #Javascript
You might like
Zerg兵种介绍
2020/03/14 星际争霸
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
php简单统计中文个数的方法
2016/09/30 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
谈谈React中的Render Props模式
2018/12/06 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
通过C++学习Python
2015/01/20 Python
在Python中处理XML的教程
2015/04/29 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
python统计cpu利用率的方法
2015/06/02 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
Python实现像awk一样分割字符串
2020/09/15 Python
深圳-东方伟业笔试部分
2015/02/11 面试题
某公司部分笔试题
2013/11/05 面试题
初入社会应届生求职信
2013/11/18 职场文书
大专学生推荐信范文
2013/11/19 职场文书
个人作风剖析材料
2014/02/02 职场文书
求职自荐信怎么写
2014/03/06 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
好的促销活动方案
2014/08/21 职场文书
技能培训通讯稿
2015/07/18 职场文书
检举信的写法
2019/04/10 职场文书
使用pytorch实现线性回归
2021/04/11 Python
python中sys模块的介绍与实例
2021/04/17 Python
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python