创建一个仿微信表情的扩展组件，可以让用户在输入框中选择表情并插入到文本中。以下是一个简单的示例，假设你已经有一组表情图片：

1. 在小程序项目中创建一个自定义组件目录，例如 components。

2. 在 components 目录下创建一个表情组件的文件，例如 emoji-picker。

   - components/emoji-picker/emoji-picker.wxml：
     <view class="emoji-picker">
       <scroll-view scroll-x="true" class="emoji-scroll" bindscrolltoupper="scrollToUpper">
         <block wx:for="{{emojiList}}" wx:key="index">
           <image src="{{item}}" mode="aspectFit" bindtap="selectEmoji"></image>
         </block>
       </scroll-view>
     </view>

   - components/emoji-picker/emoji-picker.wxss：
     .emoji-picker {
       height: 200px;
       width: 100%;
       display: flex;
       justify-content: flex-start;
       align-items: center;
     }

     .emoji-scroll {
       width: 100%;
       white-space: nowrap;
     }

     .emoji-scroll image {
       width: 40px;
       height: 40px;
       margin-right: 10px;
     }

   - components/emoji-picker/emoji-picker.js：
     Component({
       properties: {
         // 可以传入表情列表的路径数组
         emojiList: {
           type: Array,
           value: [],
         },
       },
       data: {
         // 一些其他需要的状态
       },
       methods: {
         scrollToUpper: function (e) {
           // 处理滚动到顶部的逻辑
         },
         selectEmoji: function (e) {
           const selectedEmoji = e.currentTarget.dataset.src;
           // 处理选中表情的逻辑，可以将表情插入到输入框中等
           this.triggerEvent('selectEmoji', { emoji: selectedEmoji });
         },
       },
     });

3. 在需要使用表情选择器的页面中引入该组件。
   <emoji-picker emojiList="{{emojiList}}" bind:selectEmoji="handleSelectEmoji"></emoji-picker>

   在相应的 JS 文件中，你需要定义 emojiList 数组来存储表情图片的路径，以及 handleSelectEmoji 函数来处理用户选择表情的逻辑。
   Page({
     data: {
       emojiList: [
         'path/to/emoji1.png',
         'path/to/emoji2.png',
         // 其他表情路径...
       ],
     },
     handleSelectEmoji: function (e) {
       const selectedEmoji = e.detail.emoji;
       // 处理选中表情的逻辑，例如插入到输入框中
     },
   });

这是一个简单的仿微信表情组件的示例。在实际开发中，你可能需要更多的功能和样式定制，以满足项目的需求。


转载请注明出处：http://www.zyzy.cn/article/detail/1343/微信小程序