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


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打印网页部分内容的脚本
Nov 17 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
详解原生js实现offset方法
Jun 15 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 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
PHP高级OOP技术演示
2009/08/27 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
PHP6新特性分析
2016/03/03 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
php递归函数怎么用才有效
2018/02/24 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
js转换对象为xml
2017/02/17 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
python提取页面内url列表的方法
2015/05/25 Python
python版学生管理系统
2018/01/10 Python
python3中zip()函数使用详解
2018/06/29 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
大二学生学习个人自我评价
2014/01/19 职场文书
仓库管理计划书
2014/05/04 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
解析Java中的static关键字
2021/06/14 Java/Android
浅析Python中的套接字编程
2021/06/22 Python
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript