qqface组件
{
"component": true,
"usingComponents": {}
}
.facelist {
width: 48rpx;
height: 48rpx;
padding: 5rpx;
float: left;
margin: 13rpx;
}
.face {
width: 100%;
height: 100%;
}
.facemore2 {
overflow: hidden;
height: 432rpx;
padding: 5rpx 38rpx;
background: rgba(245, 247, 250, 1);
overflow-y: scroll;
}
<view class="facemore2">
<view a:for="{{facearrs}}" a:key="{{index}}" class="facelist">
<image src="{{item.qqfaceimg}}" class="face" data-name="{{item.name}}" onTap="onTapEmoji"></image>
</view></view>
// pages/my_chat/component/qqface/qqface.js
Component({
/**
* 组件的属性列表
*/
props: {
onClickemoji: (data) => console.log(data),
value: String, // 输入框的值
},
data: {
facelist: { "104": "[右太极]", "103": "[左太极]", "102": "[献吻]", "101": "[街舞]", "100": "[激动]", "99": "[投降]", "98": "[跳绳]", "97": "[回头]", "96": "[磕头]", "95": "[转圈]", "94": "[怄火]", "93": "[发抖]", "92": "[跳跳]", "91": "[飞吻]", "90": "[爱情]", "89": "[OK]", "88": "[NO]", "87": "[爱你]", "86": "[差劲]", "85": "[拳头]", "84": "[勾引]", "83": "[抱拳]", "82": "[胜利]", "81": "[握手]", "80": "[弱]", "79": "[强]", "78": "[拥抱]", "77": "[礼物]", "76": "[太阳]", "75": "[月亮]", "74": "[便便]", "73": "[瓢虫]", "72": "[足球]", "71": "[刀]", "70": "[炸弹]", "69": "[闪电]", "68": "[蛋糕]", "67": "[心碎]", "66": "[爱心]", "65": "[嘴唇]", "64": "[凋谢]", "63": "[玫瑰]", "62": "[猪头]", "61": "[饭]", "60": "[咖啡]", "59": "[乒乓]", "58": "[篮球]", "57": "[啤酒]", "56": "[西瓜]", "55": "[菜刀]", "54": "[可怜]", "53": "[吓]", "52": "[亲亲]", "51": "[阴险]", "50": "[快哭了]", "49": "[委屈]", "48": "[鄙视]", "47": "[哈欠]", "46": "[右哼哼]", "45": "[左哼哼]", "44": "[坏笑]", "43": "[糗大了]", "42": "[鼓掌]", "41": "[抠鼻]", "40": "[擦汗]", "39": "[再见]", "38": "[敲打]", "37": "[骷髅]", "36": "[衰]", "35": "[疯了]", "34": "[晕]", "33": "[嘘]", "32": "[疑问]", "31": "[咒骂]", "30": "[奋斗]", "29": "[大兵]", "28": "[憨笑]", "27": "[流汗]", "26": "[惊恐]", "25": "[困]", "24": "[饥饿]", "23": "[傲慢]", "22": "[白眼]", "21": "[愉快]", "20": "[偷笑]", "19": "[吐]", "18": "[抓狂]", "17": "[囧]", "16": "[酷]", "15": "[难过]", "14": "[惊讶]", "13": "[呲牙]", "12": "[调皮]", "11": "[发怒]", "10": "[尴尬]", "9": "[大哭]", "8": "[睡]", "7": "[闭嘴]", "6": "[害羞]", "5": "[流泪]", "4": "[得意]", "3": "[发呆]", "2": "[色]", "1": "[撇嘴]", "0": "[微笑]" },
arr: [],
facearrs: []
},
didMount() {
var that = this
var facearr;
for (let i in that.data.facelist) {
that.data.arr.push(that.data.facelist[i]);
facearr = {
id: i,
name: that.data.facelist[i],
qqfaceimg: "../../image/faces/qq/" + i + ".png",
}
that.data.facearrs.push(facearr)
}
that.setData({
facearrs: that.data.facearrs
})
},
/**
* 组件的方法列表
*/
methods: {
//发送QQ表情
onTapEmoji: function (e) {
console.log(e)
const {
currentTarget: {
dataset: {
emoji
}
}
} = e;
const {
value
} = this.props;
var res = {}
res.emoji = e.currentTarget.dataset.name;
res.value = value + e.currentTarget.dataset.name
this.props.onClickemoji(res);
},
}
})
input组件
{
"component": true,
"usingComponents": {
"qqface": "../../component/qqface/qqface"
}
}
<view hidden="{{weuiinput}}">
<input class="weui-input" style="width:{{forwidth}}" focus="{{focus}}" onInput="getTitle" value='{{mess}}' name='message' onBlur="inputblur" onFocus="bindfocus" /></view>
<view hidden="{{hideFaceName}}">
<qqface onClickemoji="onClickemoji" value="{{mess}}"></qqface></view>
getTitle: function (e) {
var value = e.detail.value;
//console.log(value)
if (value != '') {
this.setData({
mess: value,
openadd: true,
hideSendName: false,
forwidth: "480rpx"
})
} else {
this.setData({
mess: "",
openadd: false,
hideSendName: true,
forwidth: "530rpx"
})
}
},
//失去焦点触发
inputblur: function (e) {
var that = this
that.setData({
inputmore: true,
hideFaceName: true,
key_hd: true,
face_hd: false
})
},
//获取焦点触发
bindfocus: function () {
this.setData({
key_hd: true,
face_hd: false,
})
},
onClickemoji: function (e) {
this.setData({
mess: e.value,
openadd: true,
hideSendName: false,
forwidth: "480rpx"
})
},