微信小程序实现高亮效果
来源:互联网 发布:3d数据图表制作软件 编辑:程序博客网 时间:2024/06/11 08:13
大体思路:
根据要搜索的关键字,将现有的字符串切割成多分,存放在某个数组中;前台显示时候通过,循环数据绑定,循环输出这些被切割的字符串。
js代码:
sCallback: function (res) {//ajax回调函数
if (res.code == 1) {
var list = res.data.list;
//实现高亮
for (var i = 0; i < list.length; i++) {
var oldTitle = list[i].title;
var titleLight = [];
if (keywords){//如果有搜索关键字
//调用高亮函数
titleLight = that.light(keywords, oldTitle, titleLight);
} else {//如果没有搜索关键字
titleLight.push({ key: false, word: oldTitle });
}
list[i].titleLight = titleLight;
}
res.data.list = list;
//实现高亮结束
callback && callback(res.data);
}
/*
* 高亮封装
* key 是关键字
* word 是要检索的字符串
* new_arry 接收截取的字符串
*/
light(key, word, new_arry){
var index = word.indexOf(key);
if (index > -1){
var part_before = word.slice(0, index);//截取 关键字前面部分 字符串
var part_after = word.slice(index + key.length, );//截取 关键字后面部分 字符串
new_arry.push({ key: false, word: part_before });
new_arry.push({ key: true, word: key });
if (part_after.indexOf(key) > -1) {//如果关键字后面部分 字符串 还存在 关键字key,利用递归在继续查询
this.light(key, part_after, new_arry);
} else {//否则 将关键字后面部分 字符串压入数组
new_arry.push({ key: false, word: part_after });
}
}
return new_arry;
}
小程序代码:
<block wx:for="{{item.titleLight}}" wx:for-item="item_word"> <text class="{{item_word.key ? 'select_title_left_top_remark' :''}}">{{item_word.word}}</text> </block>
- 微信小程序实现高亮效果
- 微信小程序实现弹幕效果
- 微信小程序分页效果实现
- 代码实现按钮点击高亮效果
- jquery的简单实现高亮效果
- JS实现查询关键词高亮效果
- 实现搜索关键字高亮的效果
- 微信小程序实现“鲜肉APP”首页效果
- 微信小程序实现“鲜肉APP”首页效果
- 不用Cookie实现高亮Javascript菜单效果
- as3使用滤镜实现高亮效果(GlowFilter)
- 高亮效果,使用Shader可以轻松实现
- CSS实现输入框的高亮效果-------Day50
- CSS实现输入框的高亮效果-------Day50
- selector实现按钮选中高亮效果原理
- 纯CSS3实现的表单输入高亮效果
- 游戏模型模糊高亮边缘效果实现shader
- Android 底部导航条切换高亮的效果实现
- 不同版本oracle数据列转行
- 学习笔记脚本开发之节点与组件
- gensim 之 word2vec
- android输入金额格式化文本框金额格式控制
- 蓝桥杯 ADV-162 算法提高 题目1 最大最小值
- 微信小程序实现高亮效果
- HDU 2276 矩阵快速幂,解法:1循环矩阵31ms,2普通矩阵327ms。
- iOS-GCD定时器
- 无法识别的属性“targetFramework”解决办法
- eclipse 通过Hibernate 逆向生成实体类和映射文件
- 暑期C++03 之浅拷贝问题抛出与解决
- WindowManger与window之详解篇
- mysql exist运用
- 蓝桥杯 ADV-127 算法提高 日期计算