本文实例为大家分享了小程序左右来回滚动字幕的具体代码,供大家参考,具体内容如下
wxml:
<!--pages/market/market.wxml--> <swiper indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgurls}}" wx:key="unique"> <swiper-item> <image src="{{item}}" class="slide-image"/> </swiper-item> </block> </swiper> <!--弹幕开关--> <view class="barrage-switch" style="color:{{barragetextcolor}};"> <switch id="switch_" bindchange="barrageswitch"/> <text>弹幕</text> </view> <!--弹幕输入框--> <view class="barrage-inputtext" style="display:{{barrage_inputtext}}"> <view class="barrage-input"> <input bindblur="bind_shoot" value="{{bind_shootvalue}}"/> </view> <view class="barrage-shoot"> <button class="shoot" size="mini" bindtap="shoot">发射</button> </view> </view> <!--弹幕上单文字--> <view class="barrage-fly" style="display:{{barragefly_display}}"> <block wx:for="{{barrage_style}}" wx:key="unique"> <text class="barrage-textfly" style="color:{{item.barrage_shoottextcolor}};left:{{item.barrage_phonewidth}}px;top:{{item.barragetext_height}}px;">{{item.barrage_shoottext}}</text> </block> </view>
wxss:
/* pages/market/market.wxss */ .slide-image{ width: 100%; } /* 弹幕选择按钮的操作*/ .barrage-switch{ position: absolute; bottom: 10px; right: 10px; z-index: 2; } /* 弹幕输入框的操作*/ .barrage-inputtext{ position: absolute; display: flex; background-color: #bfbfbf; width: 100%; height: 40px; flex-direction: row; nav-index: 2; justify-content: center; align-items: center; bottom: 10%; } .barrage-input{ background-color: greenyellow; width: 60%; height: 30px; } .barrage-shoot{ margin-left: 10px; width: 25%; height: 30px; } .shoot{ width: 100%; color: black; } /*弹幕飞飞飞*/ .barrage-fly{ z-index: 3; height: 80%; width: 100%; position: absolute; top: 0; } .barrage-textfly{ position: absolute; }
market.js
// pages/market/market.js var barrage_style_arr = []; var barrage_style_obj = {}; var phonewidth = 0; var timers = []; var timer; page({ data: { imgurls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatordots: true, autoplay: true, interval: 3000, duration: 500, barragetextcolor: "#d3d3d3", barrage_inputtext: "none", barrage_shoottextcolor: "black", bind_shootvalue: "", barrage_style: [], barragefly_display: "none", }, // 生命周期函数--监听页面加载 onload: function (options) { var that = this; //获取屏幕的宽度 wx.getsysteminfo({ success: function (res) { that.setdata({ barrage_phonewidth: res.windowwidth - 100, }) } }) phonewidth = that.data.barrage_phonewidth; console.log(phonewidth); }, //是否打开弹幕... barrageswitch: function (e) { console.log(e); //先判断没有打开 if (!e.detail.value) { //清空弹幕 barrage_style_arr = []; //设置data的值 this.setdata({ barragetextcolor: "#d3d3d3", barrage_inputtext: "none", barragefly_display: "none", barrage_style: barrage_style_arr, }); //清除定时器 clearinterval(timer); } else { this.setdata({ barragetextcolor: "#04be02", barrage_inputtext: "flex", barragefly_display: "block", }); //打开定时器 timer = setinterval(this.barragetext_move, 800) } }, //发射按钮 shoot: function (e) { //字体颜色随机 var textcolor = "rgb(" + parseint(math.random() * 256) + "," + parseint(math.random() * 256) + "," + parseint(math.random() * 256) + ")"; // //设置弹幕字体的水平位置样式 // var textwidth = -(this.data.bind_shootvalue.length*0); //设置弹幕字体的垂直位置样式 var barragetext_height = (math.random()) * 266; barrage_style_obj = { // textwidth:textwidth, barragetext_height: barragetext_height, barrage_shoottext: this.data.bind_shootvalue, barrage_shoottextcolor: textcolor, barrage_phonewidth: phonewidth }; barrage_style_arr.push(barrage_style_obj); this.setdata({ barrage_style: barrage_style_arr, //发送弹幕 bind_shootvalue: "" //清空输入框 }) //定时器 让弹幕动起来 // this.timer= setinterval(this.barragetext_move,800); }, //定时器 让弹幕动起来 barragetext_move: function () { var timernum = barrage_style_arr.length; var textmove; for (var i = 0; i < timernum; i++) { textmove = barrage_style_arr[i].barrage_phonewidth; console.log("barrage_style_arr[" + i + "].barrage_phonewidth----------:" + barrage_style_arr[i].barrage_phonewidth); textmove = textmove - 20; barrage_style_arr[i].barrage_phonewidth = textmove; //走完的移除掉 if (textmove <= -100) { // cleartimeout(this.timer); barrage_style_arr.splice(0, 1); i--; //全部弹幕运行完 if (barrage_style_arr.length == 0) { this.setdata({ barrage_style: barrage_style_arr, }) // clearinterval(this.timer); return; } } console.log("第" + i + "个定时器:", textmove); this.setdata({ barrage_style: barrage_style_arr, }) } }, //绑定发射输入框,将值传递给data里的bind_shootvalue,发射的时候调用 bind_shoot: function (e) { this.setdata({ bind_shootvalue: e.detail.value }) }, })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
MFC的静态库.lib、动态库.dll(包含引入库.lib)以及Unicode库示例
CTF 刷题记录(一) 白云新闻搜索(手动与自动化SQL注入)
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论