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


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实现网页上的浮动广告的简单方法
Jun 14 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
vue各种事件监听实例(小结)
Jun 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
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
在Python中使用Neo4j数据库的教程
2015/04/16 Python
python中map()与zip()操作方法
2016/02/27 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
python 多线程重启方法
2019/02/18 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
Python字典实现伪切片功能
2020/10/28 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
《翻越远方的大山》教学反思
2014/04/13 职场文书
服务承诺书怎么写
2014/05/24 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
成本会计岗位职责
2015/02/03 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
学生通报表扬范文
2015/05/04 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
Go中的条件语句Switch示例详解
2021/08/23 Golang
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫