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


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 相关文章推荐
jquery()函数的三种语法介绍
Oct 09 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
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 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
javascript cookies操作集合
2010/04/12 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python运用于数据分析的简单教程
2015/03/27 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
python使用配置文件过程详解
2019/12/28 Python
Python3 读取Word文件方式
2020/02/13 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
关于祖国的演讲稿
2014/05/04 职场文书
酒店员工培训方案
2014/06/02 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
大学生读书笔记范文
2015/07/01 职场文书
2016银行求职自荐信
2016/01/28 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL