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

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

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

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

代码如下

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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • ,,详解微信小程序开发之formId使用(模板消息)
  • ,,微信小程序视图容器(swiper)组件创建轮播图
  • ,,微信小程序自定义toast弹窗效果的实现代码
  • ,,微信小程序的WXSS和全局、页面配置详细讲解
  • ,,微信小程序实现简易table表格
  • ,,微信小程序实现二维码签到考勤系统
  • ,,微信小程序中wxs文件的一些妙用分享
  • ,,微信小程序下拉刷新PullDownRefresh的使用方法
  • ,,微信小程序module.exports模块化操作实例浅析
  • ,,微信小程序canvas开发水果老虎机的思路详解
  • ,,微信小程序bindtap事件与冒泡阻止详解
  • ,,如何利用微信小程序和php实现即时通讯聊天功能
  • ,,java遇到微信小程序 "支付验证签名失败" 问题解决
  • python玩跳一跳,python跳一跳游戏代码,微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
  • python怎么开发微信小程序,Python小程序开发
  • 留言与评论(共有 条评论)
       
    验证码: