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


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 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
Node.JS如何实现JWT原理
Sep 18 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
Get或Post提交值的非法数据处理
2006/10/09 PHP
如何过滤高亮显示非法字符
2006/10/09 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
老生常谈js数据类型
2017/08/03 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
JS实现多选框的操作
2020/06/24 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
房地产销售计划书
2014/01/10 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
关于安全演讲稿
2014/05/09 职场文书
计划生育证明格式范本
2014/09/12 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
政审证明范文
2015/06/19 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
爱护公物主题班会
2015/08/17 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
redis protocol通信协议及使用详解
2022/07/15 Redis