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


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 相关文章推荐
js中function()使用方法
Dec 24 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
vue全局使用axios的操作
Sep 08 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
Python矩阵常见运算操作实例总结
2017/09/29 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
介绍一下Make? 为什么使用make
2016/07/31 面试题
采购部部门职责
2013/12/15 职场文书
国家助学金获奖感言
2014/01/31 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
便利店促销方案
2014/02/20 职场文书
《搭石》教学反思
2014/04/07 职场文书
2015年元旦活动总结
2014/05/09 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书