小程序需求:可以像微信群聊一样@某个人或多个人
功能:输入框输入@符号(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
})
}
})