小程序弹幕功能页代码分享









/* pages/diss/index.wxss */
@import “../../templates/danmu.wxss”;
.main{
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: #fff;
background-image: url(‘http://bmob-cdn-23487.b0.upaiyun.com/2019/05/01/1869d0b840481b96808bdaec27db5eb4.png’);
background-repeat: no-repeat;
background-size: 100% 100%;
}

// pages/video/index.js
var inTimer = null, page
Page({

/**
* 页面的初始数据
*/
data: {

comments: “”,
thumbUps: “”,
canThumbUps: “”,
commentList: “”,
qtitle:”,
addInputValue: “”,
commentText: “发射”,
pageNum: 1,
arrList: [‘你好吗?’, “平南人”,’真有趣’, ‘666’, ‘嘿嘿!我也来一发’, ‘你们在干嘛?’, ‘玩手机啊’, ‘**我爱你’, ‘前排卖瓜子’, “广告位出租”, “朋友来一发弹幕”, “女朋友呢?”,”我的男朋友在哪?”,”什么时候能像你们这么优秀”, “嘿,你来晚了”,”加油呀”,”努力学习!”],
doommData: [],
},

/**
* 生命周期函数–监听页面加载
*/
onLoad: function (options) {
var self = this
page = this;
wx.showToast({
title: ‘请稍等…’,
icon: ‘loading’,
duration: 900
})
this.getinfo();
var readtime = 1000;
if (!inTimer) {
inTimer = setInterval(self.danmu, readtime);
}
},
topage(){
wx.navigateTo({
url: ‘../mode/index’,
})
},
getinfo(){
var that=this
var param = {
‘notlike’: {
‘k’: ‘notshow’,
‘v’: true
}
}
let attr={
‘select’:’title’,
‘order’: ‘-updatedAt’,
‘limit’: 450,
}
let arrList=that.data.arrList
wx.Als.bmobFunc(‘danmu’, ‘all’, param,attr).then(res => {
console.log(res)
if (res.length > 0) {
var prodData = res.map(function (item) {
return item[‘title’];
})
var info=arrList.concat(prodData)
that.setData({
arrList:info
})
}
})

},
/**
* 生命周期函数–监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数–监听页面显示
*/
onShow: function () {

},

/**
* 页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh: function () {

},
bindsend: function (e) {

var that = this;
var formId = e.detail.formId;
wx.showToast({
title: ‘请稍等…’,
icon: ‘loading’,
duration: 800
})
var uid = wx.Als.localstorage.get(‘openid’);
var myname = wx.getStorageSync(‘myname’)
var title = e.detail.value.title;
if (uid && formId) {
if (!title) {
wx.showModal({
title: ‘弹幕不能为空’,
showCancel: false
});

}
else {
var sex = wx.getStorageSync(‘sex’);

if (sex != 2) {
sex = 1;
}
var myurl = wx.getStorageSync(‘myurl’);
if (!myurl) {
myurl = “http://bmob-cdn-17575.b0.upaiyun.com/2018/05/05/b8cd789b403512fd8076c7040c0064b4.jpg”;
}
that.addinfo(title, myname, myurl, sex, formId, uid);
var n = title.split(“”);
that.setData({
text: title,
textArr: n
});
}
} else {
wx.showToast({
title: ‘您没有登录~’,
icon: ‘loading’,
duration: 1000
})
}
},
addinfo: function (title, myname, myurl, sex, formId, openid) {
var that = this
var param={
‘myname’:myname,
‘sex’:sex,
‘myurl’:myurl,
‘title’:title,
‘formId’:formId,
‘has_check’:true,
‘is_dav’:false,
‘openid’:openid
}
wx.Als.bmobFunc(‘danmu’, ‘add’, param).then(res => {
wx.showToast({
title: ‘发射成功~’,
})
if (res) {
var arrinfo = [];

var arrList = that.data.arrList
arrinfo[0] = title;
var newarrs = arrList.concat(arrinfo);
that.send_msg(title);
that.setData({
qtitle: ”,
arrList: newarrs
})
}

})

},
huanzi: function () {//返回弹幕内容
var that = this
var zi = that.data.arrList
var ran = Math.floor(Math.random() * zi.length);
var huanzi = zi[ran];
return huanzi;
},
danmu: function () {//开始弹幕
var that = this
var name = wx.Als.getRandName();
var huanzi = that.huanzi();
var info = “挺好玩的嘛~”;

if (huanzi) {
info = huanzi;
}
doommList.push(new Doomm(name + ‘说:’ + info, Math.ceil(Math.random() * 90 – 1), Math.ceil(Math.random() * 10 + 3), wx.Als.getRandColor()));
this.setData({
doommData: doommList
})
},
send_msg: function (info) {
var name = wx.getStorageSync(‘myname’)
if (!name) {
name = “我”;
}
doommList.push(new Doomm(name + ‘说:’ + info, Math.ceil(Math.random() * 100), Math.ceil(Math.random() * 10 + 4), wx.Als.getRandColor()));
this.setData({
doommData: doommList
})

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
var that = this;
var uid = wx.getStorageSync(‘uid’)

return {
title: ”,
imageUrl: ”,

path: ‘/pages/login/index?share_uid=’ + uid
}
}
})
var doommList = [], i = 0;

class Doomm {
constructor(text, top, time, color) {
this.text = text;
this.top = top;
this.time = time;
this.color = color;
this.display = true;
let that = this;
this.id = i++;
setTimeout(function () {
doommList.splice(doommList.indexOf(that), 1);//动画完成,从列表中移除这项
page.setData({
doommData: doommList
})
}, this.time * 1000)//定时器动画完成后执行。
}
}

.aon{
position: absolute;
white-space:nowrap;/* 防止向下换行*/
}
.doommview{
z-index: 3;
height:88%;
background-color: rgba(13, 25, 38, 0.3);
width: 100%;
position: absolute;
}
/**定义从右边向左边的移动的动画**/
@keyframes first{
from{left: 100%; }
to{left: -100%;}
}

.input_msg{
width: 76%;
height:60rpx;
border-radius: 50rpx 50rpx;
border: 2rpx solid #4038FD;
margin-top: 10rpx;
font-size: 30rpx;
margin-left: 10rpx;
margin-bottom: 36rpx;
padding-left:12rpx;
color: #fff;

}

.input_text{
color: #999;
padding-left: 10rpx;
}
.msg_boxinfo{
position: fixed;
bottom: 1rpx;
width: 100%;
background-color: rgba(13, 25, 38, 0.32);
/* height: 120rpx; */
height: 12%;
}
.h_line{
width: 100%;
height: 100rpx;
position: fixed;
bottom: 0;

}
.btn_send{
color: #fff;
background-color: #3e38c2;
height: 60rpx;
line-height: 60rpx;
width: 130rpx;
float: right;
margin-right: 10rpx;
display: block;
margin-top: 10rpx;
text-align: center;
font-size: 30rpx;
border-radius: 8rpx 8rpx;
}

This entry was posted in 编程 by .

发表评论

电子邮件地址不会被公开。 必填项已用*标注