这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
代码如下
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
}
效果展示
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。