unpackage/文件

unpackage/dist/build/app-plus/static/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue

@@ -0,0 +1,112 @@
+<template>
+	<view class="emotion-box" style="display: flex; flex-direction: row; flex-wrap: wrap; height: 35vh; overflow-y: scroll;" >
+		<block v-for="(list,index) in emojilist">
+			<image @click="clickEmoji(list)" :src="'../../static/emojis/qq/'+list.url+''" style="width: 35px; height: 35px; margin-top: 15px; margin-left: 18px;"></image>
+		</block>
+	</swiper>
+	</view>
+</template>
+
+<script>
+	// 1.先引入表情库，（完全手撸，十分繁琐）（这个是 QQ 的表情库）
+	import emojiList1 from '../../emoji/biaoqin.js'
+	export default {
+		props: {
+			windowWidth:{
+				type:Number,
+				default:320
+			}
+		},
+
+		data() {
+			return {
+				emojilist:emojiList1,
+				list1: [
+					[1,2,3],[4,5,6],
+					[7,8,9],[10,11,12],
+					[13,14,15],[16,17,18],
+					[19,20,21],[22,23,98]
+				],
+				list2:[
+					[25,26,27],[28,29,30],
+					[31,32,33],[34,35,36],
+					[37,38,39],[40,41,42],
+					[43,44,45],[46,47,98]
+				],
+				list3:[
+					[49,50,51],[52,53,54],
+					[55,56,57],[58,59,60],
+					[61,62,63],[64,65,66],
+					[67,68,69],[70,71,98]
+				],
+				list4:[
+					[73,74,75],[76,77,78],
+					[79,80,81],[82,83,84],
+					[85,86,87],[88,89,90],
+					[91,92,93],[94,95,98]
+				],
+				list5:[
+					[24],[48],[72],[96],[97],[98]
+				],
+				item: [],
+				img_width:0
+			}
+		},
+		onLoad() {
+			
+		},
+		mounted() {
+			
+			const query = uni.createSelectorQuery().in(this);
+			query.select('.emotion-box').boundingClientRect(data => {
+				console.log(this.windowWidth / 10);
+				this.img_width = this.windowWidth / 10;
+			}).exec();
+		},
+		methods: {
+			clickEmoji(val){
+				console.log(val)
+				let emotioni = val.alt
+				let emotion = this.emotion(val.url)
+				this.$emit('emotion', {emotion,emotioni});
+			},
+			clickHandler(i) {
+				let emotioni = `[em_${i}]`
+				let emotion = this.emotion(i)
+				this.$emit('emotion', {emotion,emotioni});
+			},
+			emotion(res) {
+				
+				const list = Array.from({length:100}, (v,k) => k)
+				let index = list.indexOf(res)
+			//	return `<img src="https://maishijie.com.cn/view/img/bkhumor-emoji/${index}.gif" align="middle">`
+				// return `<img src="https://www.nuttyreading.com/emojis/emojis/qq/${res}" width="24px" align="middle">`
+				return "https://www.nuttyreading.com/emojis/emojis/qq/"+res
+				
+				
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.emotion-box {
+		margin: 0 auto;
+		width: 100%;
+		box-sizing: border-box;
+		padding-top: 8upx;
+		overflow: hidden;
+		background: white;
+	}
+					
+	.emotion-box-line {
+		display: flex;
+	}
+
+	.emotion-item {
+		flex: 1;
+		text-align: center;
+		cursor: pointer;
+		padding:10upx;
+	}
+</style>

unpackage/dist/build/app-plus/static/bkhumor-emojiplus/components/colorui/animation.css

@@ -0,0 +1,184 @@
+/* 
+  Animation 微动画  
+  基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
+ */
+
+/* css 滤镜 控制黑白底色gif的 */
+.gif-black{  
+  mix-blend-mode: screen;  
+}
+.gif-white{  
+  mix-blend-mode: multiply; 
+}
+
+
+/* Animation css */
+[class*=animation-] {
+    animation-duration: .5s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: both
+}
+
+.animation-fade {
+    animation-name: fade;
+    animation-duration: .3s;
+    animation-timing-function: linear
+}
+
+.animation-scale-up {
+    animation-name: scale-up
+}
+
+.animation-scale-down {
+    animation-name: scale-down
+}
+
+.animation-slide-top {
+    animation-name: slide-top
+}
+
+.animation-slide-bottom {
+    animation-name: slide-bottom
+}
+
+.animation-slide-left {
+    animation-name: slide-left
+}
+
+.animation-slide-right {
+    animation-name: slide-right
+}
+
+.animation-shake {
+    animation-name: shake
+}
+
+.animation-reverse {
+    animation-direction: reverse
+}
+
+@keyframes fade {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: 1
+    }
+}
+
+@keyframes scale-up {
+    0% {
+        opacity: 0;
+        transform: scale(.2)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes scale-down {
+    0% {
+        opacity: 0;
+        transform: scale(1.8)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes slide-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes slide-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes shake {
+
+    0%,
+    100% {
+        transform: translateX(0)
+    }
+
+    10% {
+        transform: translateX(-9px)
+    }
+
+    20% {
+        transform: translateX(8px)
+    }
+
+    30% {
+        transform: translateX(-7px)
+    }
+
+    40% {
+        transform: translateX(6px)
+    }
+
+    50% {
+        transform: translateX(-5px)
+    }
+
+    60% {
+        transform: translateX(4px)
+    }
+
+    70% {
+        transform: translateX(-3px)
+    }
+
+    80% {
+        transform: translateX(2px)
+    }
+
+    90% {
+        transform: translateX(-1px)
+    }
+}
+
+@keyframes slide-left {
+    0% {
+        opacity: 0;
+        transform: translateX(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}
+
+@keyframes slide-right {
+    0% {
+        opacity: 0;
+        transform: translateX(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}

unpackage/dist/build/app-plus/static/bkhumor-emojiplus/components/colorui/components/cu-custom.vue

@@ -0,0 +1,95 @@
+<template>
+	<view>
+		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
+			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor,isShadown?' cu-bar-shadown':'']">
+				<view class="action" @tap="BackPage" v-if="isBack">
+					<text class="cuIcon-back"></text>
+					<slot name="backText"></slot>
+				</view>
+				<view class="content" :style="[{top:StatusBar + 'px'}]">
+					<slot name="content"></slot>
+				</view>
+				<slot name="right" ></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				StatusBar: this.StatusBar,
+				CustomBar: this.CustomBar
+			};
+		},
+		name: 'cu-custom',
+		computed: {
+			style() {
+				var StatusBar= this.StatusBar;
+				var CustomBar= this.CustomBar;
+				var bgImage = this.bgImage;
+				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
+				if (this.bgImage) {
+					style = `${style}background:${bgImage};`;
+				}
+				return style
+			}
+		},
+		props: {
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			isBack: {
+				type: [Boolean, String],
+				default: false
+			},
+			bgImage: {
+				type: String,
+				default: ''
+			},
+			isShadown:{
+				type: [Boolean, String],
+				default: true
+			}
+		},
+		methods: {
+			BackPage() {
+				uni.navigateBack({
+					delta: 1
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "../../../style/color/color.scss"; //颜色
+	/* 运动颜色 数据库取出 */
+	.yd-red{
+		background: $redColor-linear;
+		color: #FFF;
+	}
+	.yd-blue{
+		background: $blueColor-linear;
+		color: #FFF;
+	}
+	.yd-purple{
+		background: $purpleColor-linear;
+		color: #FFF;
+	}
+	.yd-black{
+		background: $blackColor-linear;
+		color: #FFF;
+	}
+	.yd-cyan{
+		background: $cyanColor-linear;
+		color: #FFF;
+	}
+	
+	.cu-bar-shadown{
+		-webkit-box-shadow: 0 0 30px 0 rgba(43,86,112,.1) !important;
+		box-shadow: 0 0 30px 0 rgba(43,86,112,.1) !important;
+	}
+</style>