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


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里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
判断ie的两种简单方法
Aug 12 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
Layui给switch添加响应事件的例子
Sep 03 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/07/17 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
python正则表达式re模块详细介绍
2014/05/29 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
python 19个值得学习的编程技巧
2020/08/15 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
艺术爱好者的自我评价分享
2013/10/08 职场文书
火车来了教学反思
2014/02/11 职场文书
专业技术职务聘任书
2014/03/29 职场文书
疾病捐款倡议书
2014/05/13 职场文书
经营理念口号
2014/06/21 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书