122 lines
2.5 KiB
Vue
122 lines
2.5 KiB
Vue
<template>
|
||
<uni-popup ref="confirm" type="bottom" mask-background-color="rgba(0, 0, 0, 0)" :isMaskClick="true">
|
||
<view style="height: 600rpx;background-color: #F0F0F0;" class="flex flex-column align-start justify-center flex-1 border-top">
|
||
<swiper :current="current" class="flex-1" style="width: 750rpx;">
|
||
<swiper-item>
|
||
<!-- <text class="emojiicon">쀁</text> -->
|
||
<scroll-view :scroll-y="true" :show-scrollbar="false" class="flex flex-row justify-start flex-wrap flex-1 px-2" style="">
|
||
<text class="emojifont px-1 py-1" @click="onClick(val)" style="font-size: 35px;" v-for="(val,index) in [...emojis]" :key="index">{{val}}</text>
|
||
<view style="height: 100rpx;width: 600rpx;"></view>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script>
|
||
import emojis from '@/components/emoji/emojis.js';
|
||
let timer = null
|
||
export default {
|
||
name: 'em-header',
|
||
props: {
|
||
},
|
||
data() {
|
||
return {
|
||
styles: {},
|
||
confirm:null,
|
||
menus:[],
|
||
title:"",
|
||
emojis:emojis,
|
||
current:0,
|
||
favor_face_list:[],
|
||
menusList:[]
|
||
}
|
||
},
|
||
watch: {
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
async created() {
|
||
let emojisList = [];
|
||
for (let i = 0; i <= 82; i++) {
|
||
emojisList.push(`/uC${this.transformnum(i)}`)
|
||
}
|
||
console.log(emojisList)
|
||
},
|
||
methods: {
|
||
transformnum(num){
|
||
let len = 3 //显示的长度，如果以0001则长度为4
|
||
num = parseInt(num, 10) + 1//转数据类型，以十进制自增
|
||
num = num.toString()//转为字符串
|
||
while (num.length < len) {//当字符串长度小于设定长度时，在前面加0
|
||
num = "0" + num
|
||
}
|
||
return num
|
||
},
|
||
onClick(e){
|
||
console.log(e)
|
||
this.confirm(e)
|
||
},
|
||
open({confirm}){
|
||
if(confirm) this.confirm = confirm
|
||
this.$refs.confirm.open()
|
||
this.$refs.confirm.closeMask()
|
||
},
|
||
onClose(e){},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.camera-icon{
|
||
padding: 60rpx;
|
||
border-radius: 30rpx;
|
||
font-size: 32px;
|
||
}
|
||
.border-bottom{
|
||
border-bottom-width: 1px;
|
||
border-style: solid;
|
||
border-color: #EBEBEB;
|
||
}
|
||
.list-item-left-icon-text {
|
||
font-size: 26px;
|
||
}
|
||
.emojifont {
|
||
font-family: emojifont !important;
|
||
font-style: normal;
|
||
}
|
||
.flex {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.flex-row {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.flex-column {
|
||
flex-direction: column;
|
||
}
|
||
.flex-wrap {
|
||
flex-wrap: wrap;
|
||
}
|
||
.px-2 {
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
}
|
||
.flex-1 {
|
||
flex: 1;
|
||
}
|
||
.px-1 {
|
||
padding-left: 10rpx;
|
||
padding-right: 10rpx;
|
||
}
|
||
|
||
.py-1 {
|
||
padding-top: 10rpx;
|
||
padding-bottom: 10rpx;
|
||
}
|
||
</style>
|