兩大微信小程序?qū)崿F(xiàn)彈幕效果方法,手持彈幕微信怎么搞的
微信對于大家來說都不陌生,不過里面有好多小功能相信朋友們就不一定都知道。
比如說:彩字彈幕。
方法/步驟
1打開微信,點擊【發(fā)現(xiàn)】
2找到并點擊進入【小程序】
3點擊右上角的“小放大鏡”圖標(biāo),輸入“手持彈幕”。
4選擇點擊“手持彈幕”,生成“彈幕”頁面。
5按照個人喜好對“彈幕”進行設(shè)置。(輸入您想表達文字)
6然后選擇要發(fā)送“彩字彈幕”的朋友。
7點擊“發(fā)送”(您的朋友點擊之后就會看到有意思的字幕顯示)。
微信小程序?qū)崿F(xiàn)彈幕效果
主要原理是使用的CSS3的動畫效果。
wxml代碼:
{{item.text}}
1234567891011121314
wxss:
/**index.wxss**/
.button{
position: absolute;
bottom: 0;
width: 100%;
}
.aon{
position: absolute;
white-space:nowrap;/* 防止向下?lián)Q行*/
}
.doommview{
z-index: 3;
height: 80%;
width: 100%;
position: absolute;
}
/**定義從右邊向左邊的移動的動畫**/
@keyframes first{
from{left: 100%; }
to{left: -100%;}
}123456789101112131415161718192021
js:
//index.js
var page = undefined;
Page({
onLoad: function () {
page = this;
},
bindbt:function(){
doommList.push(new Doomm("哈哈哈哈哈",Math.ceil(Math.random()*100),Math.ceil(Math.random()*10),getRandomColor()));
this.setData({
doommData : doommList
})
},
data: {
doommData:[]
}
})
var doommList=[];
var i=0;//用做唯一的wx:key
class Doomm{
constructor(text,top,time,color){
this.text = text+i;
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)//定時器動畫完成后執(zhí)行。
}
}
function getRandomColor() {
let rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
} 更多關(guān)注hi小程序。
第二部分:如何開通一個小商店