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

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

代码如下

view class= notice-wrap hidden= { { hide notice } }

视图“同治文本”

text class= tongzhi-text“{ notice } }/text

/查看

视图bindtap=开关通知 class=关闭视图 x/view

/查看

数据：{

//初始化数据

隐藏通知：假的，

注意： ,

}

//点击关闭公告

切换通知：函数(){

this.setData({

隐藏通知：真的

})

},

@关键帧提醒消息{

0% {

-WebKit-transform:translate x(90%)；

}

100% {

-WebKit-transform:translate x(-180%)；

}

}。同志文本{

右边距：80rpx

左边距：10rpx

溢出：隐藏；

空白：nowrap

文本溢出：省略号；

}。同治-正文{

字体大小：28rpx

动画：提醒信息14s线性无限；

宽度：100%;

颜色：# d09868

显示：块；

}。通知-包装{

背景：# ffebda

宽度：100%;

高度：60rpx

行高：60rpx

颜色：# d09868

字体大小：28rpx

}。关闭视图{

宽度：45rpx

高度：45rpx

行高：45rpx

位置：绝对；

右：20rpx

top:5 rpx；

文本对齐：居中；

字体大小：35rpx

}

效果展示

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