微信小程序关键字变色实现代码实例


Posted in Javascript onDecember 13, 2019

这篇文章主要介绍了微信小程序关键字变色实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1.小程序中不支持渲染indexOf使用,我们可以通过新建wps来实现

function fn(arr, arg) {
 var result = {
  indexOf: false,
  toString: ''
 }
 result.indexOf = arr.indexOf(arg) > -1;
 result.toString = arr.join(","); return result;
}
module.exports.fn = fn;

2.index.wxml

<wxs src="../indexOf.wxs" module="tools" />
<!-- tools可以自定义 -->
<view class="intro" >
<block wx:for="{微信小程序,关键字,变色}">
  <text class=" {{tools.fn(ckey, item).indexOf?'active':'black'}}">{{item}}</text>
</block>
 
</view>

引入我们的wxs,module可以自己定义,下面模板渲染中可以使用

3.index.js

const app = getApp()
 
Page({
 data: {
  keywords:['我','爱','你'],
  ckey:['我','爱']
 },
 onLoad: function () {
  console.log('代码片段是一种迷你、可分享的小程序或小游戏项目,可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档:')
  console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html')
 },
})

微信小程序关键字变色实现代码实例

小程序代码块链接:https://developers.weixin.qq.com/s/vmdBhXmA7acA

微信小程序关键字变色实现代码实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
vue写一个组件
Apr 09 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
Servlet返回的数据js解析2种方法
Dec 12 #Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 #Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 #Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 #Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 #Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 #Javascript
微信小程序背景音乐开发详解
Dec 12 #Javascript
You might like
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
浅谈php://filter的妙用
2019/03/05 PHP
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
python中selenium库的基本使用详解
2020/07/31 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
Python自动登录QQ的实现示例
2020/08/28 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
linux面试题参考答案(6)
2014/08/29 面试题
轻化专业学生实习自我鉴定
2013/09/20 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书