微信小程序左右滚动公告栏效果代码实例


Posted in Javascript onSeptember 16, 2019

这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

代码如下

<view class='notice-wrap' hidden='{{hideNotice}}'>
<view class='tongzhitext'>


<text class="tongzhi-text">{{notice}}</text>

</view>

<view bindtap='switchNotice' class="closeView">x</view>
</view>
data: {
  //初始化数据
  hideNotice: false,
  notice: '',
}
// 点击关闭公告
 switchNotice: function() {
  this.setData({
   hideNotice: true
  })
 },
@keyframes remindMessage {
 0% {
  -webkit-transform: translateX(90%);
 }

 100% {
  -webkit-transform: translateX(-180%);
 }
}

.tongzhitext {
 margin-right:80rpx;
 margin-left: 10rpx;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

.tongzhi-text {
 font-size: 28rpx;
 animation: remindMessage 14s linear infinite;
 width: 100%;
 color: #d09868;
 display: block;
}

.notice-wrap {
 background: #ffebda;
 width: 100%;
 height: 60rpx;
 line-height: 60rpx;
 color: #d09868;
 font-size: 28rpx;
}

.closeView {
 width: 45rpx;
 height: 45rpx;
 line-height: 45rpx;
 position: absolute;
 right: 20rpx;
 top: 5rpx;
 text-align: center;
 font-size: 35rpx;
}

效果展示

微信小程序左右滚动公告栏效果代码实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery对dom的操作常用方法整理
Jun 25 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 #Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 #Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 #Javascript
layui使用templet格式化表格数据的方法
Sep 16 #Javascript
layui监听单元格编辑前后交互的例子
Sep 16 #Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 #Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 #Javascript
You might like
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
PHP里的单例类写法实例
2015/06/25 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
AngularJS内置指令
2015/02/04 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
webpack多页面开发实践
2017/12/18 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
python获取android设备的GPS信息脚本分享
2015/03/06 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
在双python下设置python3为默认的方法
2018/10/31 Python
python同步两个文件夹下的内容
2019/08/29 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
英语专业毕业生自荐信范文
2013/12/31 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android