实现一个微信小程序组件:文字跑马灯效果
2023-09-11 14:19:38 时间
- marquee.json
{ "component": true, "usingComponents": {} }
- marquee.wxml
<!--components/marquee.wxml--> <view class='marquee_container'> <view class='marquee_text' style='{{ orientation }}:{{ marqueeDistance }}px;font-size: {{size}}px;'> {{ text }} </view> </view>
- marquee.wxss
/* components/marquee.wxss */ .marquee_container { position: relative; width: 100%; } .marquee_text { position: absolute; white-space: nowrap; top: 0; }
- marquee
// components/marquee.js Component({ /** * 组件的属性列表 */ properties: { text: { type: String, value: 'ILoveEwei' } }, /** * 组件的初始数据 */ data: { marqueePace: 1, marqueeDistance: 0, size: 14, orientation: 'left', interval: 20 }, /** * 组件的方法列表 */ methods: { _scrolling: function() { var _this = this; var timer = setInterval(()=> { if(-_this.data.marqueeDistance < _this.data.length) { _this.setData({ marqueeDistance: _this.data.marqueeDistance - _this.data.marqueePace }) } else { clearInterval(timer); _this.setData({ marqueeDistance: _this.data.windowWidth }); _this._scrolling(); } },_this.data.interval); } }, created: function() { var _this = this; var length = _this.data.text.length * _this.data.size; var windowWidth = wx.getSystemInfoSync().windowWidth _this.setData({ length: length, windowWidth: windowWidth }); _this._scrolling(); } })
以上就是我定义在components文件夹的组件,剩下就是引用组件
- demo.json
{ "usingComponents": { "marquee": "../../components/marquee" } }
- demo.wxml
<marquee text="我爱你我爱你我爱你"></marquee>
转 : https://www.jianshu.com/p/0ff03e5e942e
相关文章
- 微信小程序 - 下拉菜单组件
- 【小程序】微信小程序中安装配置LinUi组件库
- 微信小程序端在函数组件中使用 mobx 注入 store 失败
- 微信小程序音乐播放器组件
- 微信小程序地图组件
- 微信小程序轮播组件
- 微信小程序组件化开发框架WePY
- 微信 小程序组件 滑动导航和获取元素实际高度
- 微信小程序组件 滚动导航
- 微信小程序基于swiper组件的tab切换
- SwiftUI 组件大全之 iOS 15 循环视频背景组件 AVKit 和 AVFoundation
- 微信小程序template模板与component组件的区别和使用
- 微信小程序~基础组件
- 【微信小程序】swiper和swiper-item组件的基本使用
- 【小程序】微信小程序自定义组件Component详细总结
- 微信小程序常用学习(一)内置组件