117 lines
1.9 KiB
Vue
117 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<view class="emotion-box">
|
||
|
|
<swiper
|
||
|
|
class="swiper"
|
||
|
|
disable-programmatic-animation="true"
|
||
|
|
indicator-dots="true"
|
||
|
|
>
|
||
|
|
<swiper-item
|
||
|
|
class="emotion-box-line"
|
||
|
|
v-for="(xItem, xIndex) in list"
|
||
|
|
:key="xIndex"
|
||
|
|
>
|
||
|
|
<view v-for="(yItem, yIndex) in xItem" :key="yIndex">
|
||
|
|
<view
|
||
|
|
v-for="(zItem, zIndex) in yItem"
|
||
|
|
:key="zIndex"
|
||
|
|
class="emotion-item"
|
||
|
|
@click="clickHandler(zItem)"
|
||
|
|
>
|
||
|
|
<image :src="`/static/emoji/${zItem}.png`"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// 画矩阵
|
||
|
|
list: [
|
||
|
|
[
|
||
|
|
[0, 1, 2, 3],
|
||
|
|
[4, 5, 6, 7],
|
||
|
|
[8, 9, 10, 11],
|
||
|
|
[12, 13, 14, 15],
|
||
|
|
[16, 17, 18, 19],
|
||
|
|
[20, 21, 22, 23],
|
||
|
|
[24, 25, 26, 27],
|
||
|
|
[28, 29, 30, 31]
|
||
|
|
],
|
||
|
|
[
|
||
|
|
[32, 33, 34, 35],
|
||
|
|
[36, 37, 38, 39],
|
||
|
|
[40, 41, 42, 43],
|
||
|
|
[44, 45, 46, 47],
|
||
|
|
[48, 49, 50, 51],
|
||
|
|
[52, 53, 54, 55],
|
||
|
|
[56, 57, 58, 59],
|
||
|
|
[60, 61, 62, 63]
|
||
|
|
],
|
||
|
|
[
|
||
|
|
[64, 65, 66, 67],
|
||
|
|
[68, 69, 70, 71],
|
||
|
|
[72, 73, 74, 75],
|
||
|
|
[76, 77, 78, 79],
|
||
|
|
[80, 81, 82, 83],
|
||
|
|
[84, 85, 86, 87],
|
||
|
|
[88, 89, 90, 91],
|
||
|
|
[92, 93, 94, 95]
|
||
|
|
],
|
||
|
|
[[96, 104], [97], [98], [99], [100], [101], [102], [103]]
|
||
|
|
],
|
||
|
|
item: [],
|
||
|
|
image_width: 0
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
this.image_width = 64;
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
clickHandler(i) {
|
||
|
|
this.$emit('emotion', i);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page {
|
||
|
|
}
|
||
|
|
.emotion-box {
|
||
|
|
margin: 0 auto;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.swiper {
|
||
|
|
height: 460upx;
|
||
|
|
}
|
||
|
|
.icon {
|
||
|
|
width: 48upx;
|
||
|
|
height: 48upx;
|
||
|
|
vertical-align: -0.15em;
|
||
|
|
fill: currentColor;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.emotion-box-line {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
margin: 40upx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.emotion-item {
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 28upx 18upx;
|
||
|
|
image {
|
||
|
|
width: 46upx;
|
||
|
|
height: 46upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|