php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例

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

代码如下

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;

}

效果展示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例相关推荐

微信登录小程序授权显示服务器出错,微信小程序授权登录解决方案的代码实例（含未通过授权解决方案）...
本文实例为大家分享了微信小程序授权登录解决方案的具体代码,供大家参考,具体内容如下 getUserInfoF:function(){ var that = this; wx.getSetting({ ...
微信小程序-通知滚动小提示
代码地址如下: http://www.demodashi.com/demo/14044.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
数字滚动（微信小程序）
数字滚动(微信小程序) 微信小程序使用数字滚动的功能,引用了外部的包 WxCountUp.js 页面使用: countup.wxml <view class="page"&g ...
IOS微信小程序页面滚动导致滚动穿透的解决办法
IOS微信小程序页面滚动导致滚动穿透的解决办法当微信小程序页面存在弹窗并且有可滚动的列表时,IOS默认的页面滚动会使弹窗滚动列表失焦,从而出现弹窗列表无法滚动的情况第一步第二步当微信小程序页面 ...
微信小程序 scroll-view组件实现列表页实例代码
这篇文章主要介绍了微信小程序 scroll-view组件实现列表页实例代码的相关资料,scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端 ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...
微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...

php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例

php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例相关推荐

最新文章

热门文章