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


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 相关文章推荐
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
PHPCMS的使用小结
2010/09/20 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
javascript基础知识
2016/06/07 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
js判断是否是手机页面
2017/03/17 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python中static相关知识小结
2018/01/02 Python
python——全排列数的生成方式
2020/02/26 Python
优秀企业获奖感言
2014/02/01 职场文书
顶碗少年教学反思
2014/02/21 职场文书
大型会议策划方案
2014/05/17 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
开展警示教育活动总结
2015/05/09 职场文书
毕业证明书
2015/06/19 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL