小程序--模拟@人的功能

小程序需求：可以像微信群聊一样@某个人或多个人

功能：输入框输入@符号（index.wxml），跳转至可以@人的页面（select.wxml）

实现思路：

1、监听input的输入，判断是否有@符号输入

2、拿到选中人的名称

3、设置input的光标位置

代码：

index.wxml

<input placeholder='请输入文字' placeholder-class='placeHolder' confirm-type='send' bindinput='textInput' focus='{{focus}}' value='{{textValue}}' selection-start='{{textNum}}' selection-end='{{textNum}}' bindconfirm='sendMessage'></input>

index.js

Page:({
    data:{
        textValue:'',
        textNum:-1,
        focus:true
    },
    textInput(e) {
        let textValue = e.detail.value
        if (this.data.textValue.length > textValue.length){
            // 删除操作 只做赋值 不做判断是否有@符号
            this.data.textValue = textValue
        }else{
            // 输入操作
            this.data.textValue = textValue
            var textIndex = textValue.indexOf('@', this.data.textValue.length - 1);
            if (textIndex > -1) {
                wx.navigateTo({
                  url: `/pages/monitor/select/select?textValue=${textValue}`
                })
             }
        }
  },
})

选择人的页面--select.wxml  其实就是一个用户列表

<view class='container'>
  <view class='list' bindtap='click' wx:for='{{arr}}' wx:key='' data-index='{{index}}' data-id='{{item.openId}}'>
    <view class='img'>
      <image src='{{item.avatarPath}}' mode='aspectFill'></image>
    </view>
    <view class='font'>{{item.nickName}}</view>
  </view>
</view>

select.js -- 这里的代码只做返回上个页面时，输入框的自动聚焦及光标位置

Page({
    
    data:{
        arr:[],
        prevText:'',
        prevIndex:-1
    },
    onLoad:function(options){
        this.data.prevText=options.textValue
        // 获取上个页面 设置输入框自动聚焦及光标位置
        let pages = getCurrentPages();
        let prevPage = pages[pages.length - 2];
        prevPage.setData({
            textValue: `${this.data.prevText}`,
            focus: true,
            textNum: `${this.data.prevText}`.length
        })
    },
    // 点击用户列表时
    click(e){
        // 获取到选择人的昵称
        let text = this.data.arr[e.currentTarget.dataset.index].nickName
        let pages = getCurrentPages();
        let prevPage = pages[pages.length - 2];
        prevPage.setData({
            textValue: `${this.data.prevText}${text}`,
            focus: true,
            textNum: `${this.data.prevText}${text}`.length
        })
        wx.navigateBack({
            delta: 1
        })
    }

})