|
直接上效果： 表情与文字切换部分 点击识别表情部分  体验  实现思路： 1、动画控制切换 2、emoji-parse解析表情 代码：
const emojiList = require('components/emoji-parser/wechat_emotion.js')
const emojiKeys = Object.keys(emojiList)
const emojiValue = Object.values(emojiList)
Page({
/**
* 页面的初始数据
*/
data: {
emojiKeys,
emojiValue,
backgroundPosition:{
x:10,
y:5
},
systemInfo:{},
emojiImageInfo:{},
isEmoji:false,
switchImageSrc:"emoji.png",
isFocus:false,
emojiPositions:[],
emojiText:"/::B"
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(emojiKeys)
var that = this
wx.getSystemInfo({
success: function(res) {
var systemInfo = res
console.log(systemInfo)
wx.getImageInfo({
src: 'https://6e6f-normal-924598.tcb.qcloud.la/meinv/qqface.png?sign=675ae84c299870334763ddd840dff0d7&t=1583653126',
success: res => {
var emojiImageInfo = res
console.log(emojiImageInfo)
var ratio = emojiImageInfo.width/systemInfo.windowWidth
console.log(ratio)
that.setData({
systemInfo:systemInfo,
emojiImageInfo:emojiImageInfo,
ratio:ratio
})
}
})
},
})
},
chooseEmoji(e){
console.log(e)
var index = e.currentTarget.dataset.index
this.setData({
backgroundPosition: this.data.emojiValue[index],
emojiText: emojiKeys[index]
})
},
switchFocus(e){
if (this.data.isEmoji) {
// animationEmojiShow.translateY(0).step()
this.data.isEmoji=false
this.setData({
switchImageSrc: "emoji.png",
isFocus:true
})
} else {
var animationEmojiShow = wx.createAnimation({
duration: 300,
timingFunction: 'linear'
})
animationEmojiShow.translateY(-250).step()
this.data.isEmoji = true
this.setData({
switchImageSrc: "keyboard.png",
animationEmojiShow: animationEmojiShow.export()
})
}
},
closeDiscuss(){
var animationEmojiShow = wx.createAnimation({
duration: 300,
timingFunction: 'linear'
})
animationEmojiShow.translateY(0).step()
this.data.isEmoji = false
this.setData({
switchImageSrc: "emoji.png",
animationEmojiShow: animationEmojiShow.export()
})
}
})
wxml
您点击了
|