原生小程序封装跑马灯效果


Posted in Javascript onOctober 21, 2020

本文实例为大家分享了小程序封装跑马灯效果的具体代码,供大家参考,具体内容如下

原生小程序封装跑马灯效果

Marquee.wxml

<view class="marquee_container " style="background:{{broadcast_arr.back_color}};font-size:32rpx;">
 <view class='marquee_text' style='--marqueeWidth--:{{-broadcast_arr.width_mal}}px;--speed--:{{broadcast_arr.time}}s;width:{{broadcast_arr.width_mal}}px;'>
 <block wx:for="{{data}}" wx:key='index'>
 <view style='color:{{broadcast_arr.text_color}};margin-left:{{index!=0?item.starspos*2:0}}rpx;'>
 {{item.img}}
 </view>
 </block>
 </view>
</view>

Marquee.wxss

@keyframes around {
 from {
 margin-left: 100%;
 }

 to {
 margin-left: var(--marqueeWidth--);
 }
}

.marquee_container {
 /* background-color: #0099FF; */
 padding: 12rpx 0;
 position: relative;
 width: 100%;
 /* height: 50rpx; */

}

.marquee_text {
 display: flex;
 white-space: nowrap;
 animation-name: around;
 animation-duration: var(--speed--);
 animation-iteration-count: infinite;
 animation-timing-function: linear;
 line-height: 50rpx;
}

.marquee_tit {
 height: 50rpx;
 line-height: 50rpx;
 position: absolute;
 padding-left: 22rpx;
}

Marquee.js

Component({
 options: {
 multipleSlots: true // 在组件定义时的选项中启用多slot支持
 },
 properties: {
 title: {   // 属性名
  type: String,  // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
  value: '标题' , // 属性初始值(可选),如果未指定则会根据类型选择一个
  observer: function (newVal) {
  this.setData({
   'data[0].img': newVal
  })
  this.run()
  }
 }
 },
 data: {
 data: [
  {
  img: "",
  }
 ],
 broadcast_arr: {
  speed: 5, //滚动速度,每秒5个字
  font_size: "16", //字体大小(px)
  text_color: "#de8c17", //字体颜色
  back_color: "#fffbe8", //背景色
 }
 },

 /**
 * 生命周期函数--监听页面加载
 */
 methods: {
 run() {
  let ititdata = this.data.data,
  assist = this.data.broadcast_arr,
  this_width = 0,
  spacing = 0,
  speed = (this.data.broadcast_arr.speed * this.data.broadcast_arr.font_size); //m每秒行走的距离

  for (let i in ititdata) {
  ititdata[i].starspos = wx.getSystemInfoSync().windowWidth; //以取屏幕宽度为间距
  this_width += (ititdata[i].img.length-12) * this.data.broadcast_arr.font_size;
  if (i != ititdata.length - 1) {
   spacing += ititdata[i].starspos
  }
  }
  let total_length = this_width + spacing;//总长
  assist.time = total_length / speed; /**滚动时间*/
  assist.width_mal = total_length;
  this.setData({
  broadcast_arr: assist,
  data: ititdata
  })
 }
 }
})

index引入—index.json

{
 "usingComponents": {
 "marquee":"/components/Marquee/Marquee"
 },

index.wxml

<!--跑马灯 Linyufan.com-->
 <marquee id='marquee' title='江龙:每日惠自提店铺特价啦~店铺特价啦~店铺特价啦~'></marquee>
<!--跑马灯-->

index.js

onReady:function(){
 this.marquee=this.selectComponent('#marquee')
 this.marquee.run()
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
解析js如何获取css样式
Dec 11 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
uniapp实现横向滚动选择日期
Oct 21 #Javascript
实现vuex原理的示例
Oct 21 #Javascript
详解JavaScript类型判断的四种方法
Oct 21 #Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 #Javascript
vue中template的三种写法示例
Oct 21 #Javascript
Vue使用v-viewer实现图片预览
Oct 21 #Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 #Javascript
You might like
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
js get和post请求实现代码解析
2020/02/06 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python中的闭包详细介绍和实例
2014/11/21 Python
python轻松实现代码编码格式转换
2015/03/26 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
Django的Modelforms用法简介
2019/07/27 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
最新党员的自我评价分享
2013/11/04 职场文书
春节活动策划方案
2014/01/24 职场文书
2014年统计工作总结
2014/11/21 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
设置IIS Express并发数
2022/07/07 Servers