长沙网站建设设计,专业网页制作编辑工具,七牛图片水印 wordpress,广西桂林旅游攻略uni-app实现表情包发送#xff0c; vue实现思路直接使用grideview网格布局加载emoj表情包即可实现#xff0c;很简单#xff0c;但是nvue稍微复杂#xff0c;这里采用的方案是nvue提供的组件list
看效果 代码
templateview stylemargin-right: 10rpx;m…uni-app实现表情包发送 vue实现思路直接使用grideview网格布局加载emoj表情包即可实现很简单但是nvue稍微复杂这里采用的方案是nvue提供的组件list
看效果 代码
templateview stylemargin-right: 10rpx;margin-left: 20rpx;height: 446rpx;!--列表--list :show-scrollbarfalse!-- 注意事项: 不能使用 index 作为 key 的唯一标识 --cell v-for(items, index) in emojData :keyitems.idview styledisplay: flex;flex-direction: row;block v-for(item, index) in itemsview classemoj_parent hover-classcheckActive hover-stay-time100clicktuchEmoj(item,index)text clicktuchEmoj(item,index) classemoj_conn{{item}}/text/view/block/view/cell/list/view/templatescriptexport default {data() {return {emojData: [[, , , ❤, , , , ],[, , , , , , , ],[, , , , , , , ],[, , , , , , , ],[, , , , , , , ],[, , , , , , , ],[, , , , , , , ],[, , , , , , , ],[, , , , , , , ],[, , , , , , , ],[, , , , , , , ],[, , , , , , ]]}},methods: {tuchEmoj: function(item, index) {console.log(tuchEmoj JSON.stringify(index) item)}}}
/scriptstyle.emoj_parent {margin-left: 8rpx;margin-bottom: 5rpx;align-items: center;margin-top: 8rpx;padding-top: 5rpx;padding-bottom: 5rpx;}.checkActive {background-color: #e8e8e8 !important;}.emoj_conn {width: 80rpx;font-size: 56rpx;text-align: center;}
/style
