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


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 相关文章推荐
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 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
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
python中while循环语句用法简单实例
2015/05/07 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
python实现连续图文识别
2018/12/18 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
社区安全生产月活动总结
2014/07/05 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
城管个人总结
2015/02/28 职场文书
导游词之无锡古运河
2019/11/14 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python