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


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 String对象扩展HTML编码和解码的方法
Jun 02 Javascript
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 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压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
ThinkPHP之getField详解
2014/06/20 PHP
php以post形式发送xml的方法
2014/11/04 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python中动态创建类实例的方法
2017/03/24 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
Champion官网:美国冠军运动服装
2017/01/25 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
初中物理教学反思
2014/01/14 职场文书
大学生英语演讲稿
2014/04/24 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书