作者:Android代码 | 来源:互联网 | 2023-05-18 12:14
这篇文章主要介绍“怎么在微信小程序中实现跑马灯效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么在微信小程序中实现跑马灯效果”文章能帮助大家解决问题。
1.封装成一个组件:
查看
公告
{{item.title}}
.sx_lunbo {
width: 100%;
height: 60rpx;
border-bottom: solid 1px #eee;
}
.chakan{
padding-left: 25rpx;
right: 20rpx;
clear: both;
position:absolute;
height: 40rpx;
margin-top: 10rpx;
color: #f63;
border:solid 1px #f63;
border-radius:5rpx;
padding: 0rpx 10rpx 0rpx 10rpx;
font-size: 28rpx
}
.sx_swiper {
width: 550rpx;
margin-top: 10rpx;
}
.sx_swiper swiper-item{
height: 40rpx
}
.reds {
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
width:500rpx;
font-size: 28rpx;
height: 40rpx;
}
.red {
font-size: 24rpx;
color: white;
width: 60rpx;
height: 40rpx;
line-height: 40rpx;
background: blue;
padding-left: 10rpx;
margin: 10rpx;
border-radius: 10rpx;
}
2.在页面调用:
@import "../template/roll/roll.wxss";
newsId: function (e) {
var that = this
var item = e.detail.current;
this.setData({
newsId:that.data.news[item].id
})
},
3.news的数据:
关于“怎么在微信小程序中实现跑马灯效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程笔记行业资讯频道,小编每天都会为大家更新不同的知识点。