微信小程序实现跑马灯效果(自定义组件详解)

首先看一下效果吧

首先我们在项目根目录建一个公共文件夹,这里我命名为components

在components里面创建一个组件, dt-horse-race-lamp > index 最后我会把我的目录结构给大家看一下, 代码都有注释,这里我就不做过多的解释了

组件wxml

<view class="horse-race-lamp"><!-- 跑马灯效果 --><view class="example"><view class="marquee-box"><view class="marquee-text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;"><view class="marquee-monomer" wx:for="{{horseRaceLampList}}" wx:key="index"><view class="marquee-monomer-left"><image class="user-head"></image><view class="marquee-monomer-left-desc">幸运星</view></view><view class="marquee-con">{{item.text}}</view></view></view></view></view>
</view>

组件js

Component({/*** 组件的属性列表*/properties: {marqueeDistance: {        //初始滚动距离type: [String, Number],value: 0        },size: {       // 字体大小type: Number,value: 14},horseRaceLampList: {         // 跑马灯内容type: Array,value: []},orientation: {    // 滚动方向type: String,value: 'left'},interval: {       // 时间间隔type: [String, Number],value: 20},marqueePace: {      // 滚动速度type: Number,value: 1}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {}
})

组件wxss

.horse-race-lamp {height: 115rpx;line-height: 115rpx;background: #FA443A;border: 1px solid #fa3228;
}.example {display: block;height: 60rpx;color: #FFFFFF;line-height: 60rpx;}.marquee-box {width: 100%;position: relative;}.marquee-text {white-space: nowrap;position: absolute;top: 0;display: flex;flex-direction: row;}.marquee-con {background-color: #FF7D74;padding: 0 30rpx 0 30rpx;border-top-right-radius: 10rpx;border-bottom-right-radius: 10rpx;margin-top: 28rpx;margin-left: -10rpx;
}.user-head {width: 81rpx;height: 81rpx;border-radius: 50%;border: 1px solid #FFFFFF;display: block;
}.marquee-monomer {display: flex;margin-top: 10rpx;margin-right: 60rpx;
}.marquee-monomer:last-child {margin-right: 0;
}.marquee-monomer-left {z-index: 99;
}.marquee-monomer-left-desc {font-size: 20rpx;color: #fa9551;background: linear-gradient(135deg,  #fff4ec, #fccdae);height: 28rpx;line-height: 28rpx;width: 79rpx;text-align: center;border-radius: 5rpx;margin: -20rpx auto 0;
}

组件json

{"component": true,"usingComponents": {}
}

接下来我们在需要的页面中引用一下

index.json

{"usingComponents": {"dt-horse-race-lamp": "../../../components/dt-horse-race-lamp/index",}
}

index.wxml

<!-- 跑马灯 --><dt-horse-race-lamp horseRaceLampList="{{horseRaceLampList}}" marqueeDistance="{{marqueeDistance}}" interval="{{interval}}" orientation="{{orientation}}" size="{{size}}" marqueePace="{{marqueePace}}"></dt-horse-race-lamp>

index.js

Page({data: {horseRaceLampList: [{text: '51淘甄貨,一个可以省钱的购物平台'}, {text: '51淘甄貨,一个可以省钱的购物平台'}],          // 跑马灯内容marqueePace: 1,             // 跑马灯滚动速度marqueeDistance: 0,           // 跑马灯滚动距离interval: 20,               // 跑马灯时间间隔orientation: 'left',        // 跑马灯滚定方向size: 14,                   // 跑马灯字体大小},/*** 生命周期函数--监听页面显示*/onShow: function () {let _this = this;// 跑马灯let horseRaceLampListLength = 0;_this.data.horseRaceLampList.forEach((item, index) => {horseRaceLampListLength += item.text.length;})let horseRaceLampTextLength = horseRaceLampListLength * _this.data.size + (_this.data.horseRaceLampList.length * 80 - 20);let windowWidth = wx.getSystemInfoSync().windowWidth;               // 获取屏幕宽度_this.runMarquee(horseRaceLampTextLength, windowWidth)},/*** 跑马灯*/runMarquee: function(horseRaceLampTextLength, windowWidth) {let _this = this;var interval = setInterval(function() {// 内容一直到末端if(-_this.data.marqueeDistance < horseRaceLampTextLength) {_this.setData({marqueeDistance: _this.data.marqueeDistance - _this.data.marqueePace})} else {clearInterval(interval)_this.setData({marqueeDistance: windowWidth})_this.runMarquee(horseRaceLampTextLength, windowWidth)}}, _this.data.interval)},
})

以上就是跑马灯所有代码了,有什么问题可以下方留言

如果对你有用，关注一下博主的小程序，登录一下给予支持，以后有什么开源好用的源码都会上传到小程序

微信小程序实现跑马灯效果(自定义组件详解)相关推荐

c语言小程序跑马灯,微信小程序实现跑马灯效果（完整代码）
在微信小程序里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码:一个人活着就是为了让更多的人更好的活着! Wxss代码:/*首页跑马灯 ...
java 走马灯程序,详解微信小程序实现跑马灯效果（附完整代码）
在微信小程序里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码: 一个人活着就是为了让更多的人更好的活着! Wxss代码: /*首页跑 ...
微信小程序实现跑马灯效果（完整代码）
在微信小程序里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码:  < ...
微信小程序文字跑马灯效果
1.样式 /*首页跑马灯效果开始*/ .container_marquee {display: flex;flex-direction: column;justify-content: space-b ...
微信小程序开发学习5（自定义组件）
微信小程序开发学习5(自定义组件) 1.学习目标能够知道如何自定义小程序组件能够知道小程序组件中behaviors的作用能够知道如何安装和配置vant-weapp组件库能够知道如何使用MobX ...
微信小程序网悦新闻开发--自定义组件开发（六）
目录微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
《微信小程序开发》页面导航最强详解 | 如何对小程序页面进行跳转？
<微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 文章目录 <微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 一.微信小程序导航二.命 ...
pos请求微信小程序_微信小程序蓝牙连接小票打印机实例代码详解
1.连接蓝牙 (第一次发表博客) 第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAdapt ...