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


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类中获取外部函数名的方法
Aug 19 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 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
使用数据库保存session的方法
2006/10/09 PHP
php curl模拟post请求小实例
2013/11/13 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
PHP的引用详解
2015/02/22 PHP
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
详解JavaScript中的函数、对象
2019/04/01 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
django解决订单并发问题【推荐】
2019/07/31 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
英国香水店:The Perfume Shop
2017/03/27 全球购物
教师求职推荐信范文
2013/11/20 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
2015年信访工作总结
2015/04/07 职场文书
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
Redis数据同步之redis shake的实现方法
2022/04/21 Redis