微信小程序搜索关键字高亮和ctrl+f搜索定位实现

原理

高亮关键字

将文本存入数组，以text标签循环渲染，当有关键字keyword时，将文本的关键字替换成%%keyword%%再分割split成数组去渲染。
当前节点文本等于关键字 class="{{ item == searchValue ? 'searchHigh' : ''}}"时，添加highLight样式。
———————————————————————————————————————————
到这里高亮关键字就实现了。

类似于ctrl+f搜索定位

小程序没有办法操作dom元素不会返回像web端一样的dom节点。
给所有循环渲染的text标签加上id。
利用 wx.createSelectorQuery().selectAll('.searchHigh').boundingClientRect获取所有添加了highLight样式的节点id数组
数组的length就是找到关键字的总数，创建一个activeNodeIndex控制上一条和下一条。
当text标签的id和数组中取出的选中id相同时，添加选中selected样式。
可以利用scrollview的scrollIntoView(selector)滚动到选中的节点,前提是scrollview的enhanced属性要为true。
也可以用wx.pageScrollTo。具体看你使用的场景。

效果

源码（mpx）

<template><view class="container"><van-searchid="searchPanel"value="{{ searchValue }}"placeholder="请输入搜索关键词"bind:change="inpChange"/><view class="statistic-bar"><text>第{{ current }}条</text><text>共{{ totalKeywordNodes }}条</text><text style="color: #1d84f6" bindtap="handleScroll('pre')">上一条</text><text style="color: #1d84f6" bindtap="handleScroll('next')">下一条</text></view><scroll-view scroll-y enhanced style="height: {{listHeight}}px" class="listPanel"><view class="news_item" wx:for="{{newList}}" wx:key="index"><view class="descBox"><view class="news_title textoverflow">{{ item.title }}</view><view class="news_text"><textwx:for="{{ item.jj }}"wx:for-index="secondIndex"wx:key="secondIndex"id="text_{{index + '_'+ secondIndex}}"class="{{ item == searchValue ? 'searchHigh' : ''}}"wx:class="{{ {selected: 'text_'+index + '_'+ secondIndex === keywordNodes[activeNodeIndex]} }}">{{ item }}</text></view></view></view></scroll-view></view>
</template>
<script>
import { createPage } from '@mpxjs/core'
createPage({data: {mainHeight: 0,seachPanelHeight: 0,searchValue: '',scrollView: null, // 滚动容器节点newList: [{title: '关于举行机器人竞赛活动的相所发生的方式胜多负少的',jj: '内容简介中央气象台气温气温UIuouoiuo水电费水电费公司的发生的对方水电费'},{title: '关偶奇偶我奇偶就hi呕吼我和奇偶以后后的',jj: '内kjlkjljk防守打法你是端放开那没事的离开父母了情况没考虑为全面方水电费'},{title: '关于额外日围殴日头诶让你偷Irene的',jj: '内容简介中央气象台发布寒潮蓝色预警计今天20时至8日20时水电费水电费水电费公司的发生的对方水电费'},{title: '关于尔特瑞特认同与一体uyiuyiuyiuyiiuoui 胜多负少的',jj: '内容简介我解耦我偶奇偶我我就挨打王企鹅卖家前往颇尔恶趣味驱蚊器翁群水电费'}],keywordNodes: [], // 存放的关键字节点ID数组activeNodeIndex: 0 // 当前激活的节点索引},computed: {listHeight () {return this.mainHeight - this.seachPanelHeight},totalKeywordNodes () {return this.keywordNodes.length},current () {if (this.keywordNodes.length === 0) {return 0} else {return this.activeNodeIndex + 1}}},onReady () {this.getWindowHeight()this.getFields()this.mockData()},methods: {mockData () {let temp = []for (let i = 0; i < 4; i++) {temp = temp.concat(this.newList)}this.setData({newList: temp})},getWindowHeight () {const that = thiswx.getSystemInfo({success (res) {that.setData({mainHeight: res.windowHeight})}})},getFields () {const that = thisconst query = wx.createSelectorQuery()query.select('#searchPanel').fields({dataset: true,size: true}, res => {// console.log(res)that.setData({seachPanelHeight: res.height})}).exec()},// 替换关键字并分割成数组getInf (str, key) {return str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%').filter(item => {if (item) {return true}return false})},//  输入改变时触发inpChange (e) {let key = e.detailthis.setData({activeNodeIndex: 0,keywordNodes: [],searchValue: e.detail})// 如果关键字有值遍历新闻列表if (key) {this.newList.forEach(element => {// 如果该字段已经是数组则重新变为字符串if (element.jj instanceof Array) {element.jj = element.jj.join('')}let newContent2 = this.getInf(element.jj, key)// 把分割的数组赋值给每一项的titleelement.jj = newContent2})// console.log(this.newList)this.$nextTick(() => {wx.createSelectorQuery().selectAll('.searchHigh').boundingClientRect(res => {let keywordNodes = res.map(item => item.id)this.setData({keywordNodes: keywordNodes})}).select('.listPanel').node(res => {this.setData({scrollView: res.node})this.scrollToView(0)}).exec()})}},/*** @method 将节点滚动至可视窗口* @param {number} index*/scrollToView (index) {// console.log("#" + this.keywordNodes[index]);this.$nextTick(() => {this.scrollView.scrollIntoView("#" + this.keywordNodes[index])})},/*** @method 控制上一条和下一条* @param {string} type*/handleScroll (type) {switch (type) {case 'pre':if (this.activeNodeIndex === 0) {this.activeNodeIndex = this.keywordNodes.length - 1} else {this.activeNodeIndex--}break;default:if (this.activeNodeIndex === this.keywordNodes.length - 1) {this.activeNodeIndex = 0} else {this.activeNodeIndex++}break;}this.scrollToView(this.activeNodeIndex)}}
})
</script>
<style scoped>.container {width: 100%;overflow: scroll;--webkit-overflow-scrolling: touch-action;}.statistic-bar {position: fixed;left: 16px;bottom: 30px;right: 16px;border-radius: 12rpx;background-color: #e6f7ff;z-index: 999;display: flex;justify-content: space-around;width: calc(100% - 16px -16px);padding: 16rpx 32rpx;box-sizing: border-box;font-size: 26rpx;box-shadow: 6rpx 6rpx 15rpx rgba(0, 0, 0, 0.125), -6rpx 0rpx 15rpx rgba(0, 0, 0, 0.125);color: #323233;}.listPanel {box-sizing: border-box;background-color: #f5f5f5;}.news_item {width: 100%;height: 208rpx;padding: 0 32rpx;margin: 32rpx 0;box-sizing: border-box;}.descBox {width: 100%;height: 100%;background: #fff;border-radius: 12rpx;padding: 24rpx;box-sizing: border-box;}.news_title {width: 100%;font-size: 32rpx;font-weight: 500;text-align: left;color: black;margin-bottom: 10rpx;}.news_text {font-size: 26rpx;font-weight: 400;color: #909090;text-align: left;margin-bottom: 7rpx;display: -webkit-box;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;word-break: break-all;}.textoverflow {display: -webkit-box;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;word-break: break-all;}.searchHigh {font-size: 36rpx;color: #1d84f6;font-weight: bold;}.selected {background: #909090;}
</style>
<script type="application/json">{"navigationBarTitleText": "搜索关键字高亮","usingComponents": {"van-search": "@vant/weapp/dist/search/index"}}
</script>

微信小程序搜索关键字高亮和ctrl+f搜索定位实现相关推荐

微信小程序与后端Java接口交互-图书搜索实现
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 我们模拟实现一个微信小程序端关键字图书,然后显示图书列表的功能,如下图: 实现大体思路,前端用户输入关键字,通过bindtap事件,事件里得 ...
微信小程序实现代码高亮
预览老规矩,先上效果图. 看起来效果还不错,实名感谢日出一点一这位小哥的教程. 因为,当搜索微信小程序实现代码高亮后,结果基本都是微信小程序搜索,关键词高亮这一类的.Onz ,这可真是在 ...
微信小程序统计——关键字解释
小程序统计关键字解释小程序数据分析,是面向小程序开发者.运营者的数据分析工具,提供关键指标统计.实时访问监控.自定义分析等,帮助小程序产品迭代优化和运营.主要功能包括每日例行统计的标准分析,以及满足 ...
企业微信小程序_集成腾讯地图实现精准定位考勤打卡
开源项目地址:https://gitee.com/gblfy/tx-position-check-in 关于微信小程序集成腾讯地图详情,可以参考:https://blog.csdn.net/weixi ...
微信小程序流量主被封和暂停搜索？
9月26号毫无征兆的收到微信广告助手的通知: 然后进入小程序后台,提示如下: 小程序广告组件关闭原因: 流量主通过违法违规等不正常手段获取流量,包括但不限于通过头像.名称.简介混淆正常搜索结果,影响用 ...
基于java的微信小程序的实现（十）用户搜索及热搜词相关功能后端实现
文章目录 1.添加热搜词功能 1.数据库表结构分析 2.需求分析 3.代码实现 2.查询热搜词功能 1.需求分析 2.代码实现 3.搜索功能的实现 1.需求分析 2.自定义模糊查询 1.添加热搜词功能 ...
微信小程序实现关键词高亮
1.实现效果 2.实现原理 1.将搜索的值与列表中的每一项进行对比,如果那一项indexOf(搜索值)!=-1,则表示这项中含有该关键字,处理列表,为这一项设置相应的属性. 2.split将字符串和搜 ...
微信小程序获取地理位置，用户未开启手机定位时的解决方案
要点:获取地理位置时,如果获取地理位置失败,有两种情况: 1.用户未给小程序授权地理位置信息 2.系统设置中-隐私选项地理位置未开启或系统未给微信授权地理位置信息在获取地理位置信息失败后,判断用户是 ...
微信小程序demo：QQ音乐；音乐搜索，音乐列表及播放停止
代码示例: [AppleScript] 纯文本查看复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
微信小程序列表首字母排序并根据字母定位
背景:页面左侧为分类,点击不同分类,右侧展示相应分类的列表数据,并点击字母悬浮窗,可以快速定位到相应的数据板块思路: 1.汉字转中文 2.排序 3.点击字母定位一汉字转中文汉字与拼音互转工具 ...

微信小程序搜索关键字高亮和ctrl+f搜索定位实现

原理

高亮关键字

类似于ctrl+f搜索定位

效果

源码（mpx）

微信小程序搜索关键字高亮和ctrl+f搜索定位实现相关推荐

最新文章

热门文章