解决微信小程序wx:if使用不了函数,WXS使用方法以及防踩坑
2020-06-07 04:41
721 查看
最近自己写自己的小程序的时候遇到了wx:if想要绑定的数据使用了indexOf()方法来判断是否需要显示,但是wx:if没有办法在绑定的数据中进行函数运算,只能进行简单的判断和加减运算。
在网上搜索了一下之后发现只能将数据在JS中计算后在赋值到data中,或者使用WXS来自己写一个函数方法,然后在wxml中引用后就可以将这个方法使用在wxml绑定的数据中了
下面先放一下官方文档的WXS的定义
WXS 模块WXS 代码可以编写在 wxml 文件中的 标签内,或以 .wxs 为后缀名的文件内。模块每一个 .wxs 文件和 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。
在自己使用WXS也遇到了一些坑,首先是WXS的文件不能创建在你和你的wxml页面同级的文件夹,不然会报错,最好是建立在和Page同级的页面,我自己在调试的时候就是出现这个错误浪费了很多时间,下面上代码
function.wxs
var arrayfind = function (arr, string) { if (arr !== undefined) { return arr.indexOf(string) } else return -1 } module.exports.arrayfind = arrayfind ;
定义了一个arrayfind的方法,传入两个参数,使用indexOf的方法检索arr数组中是否含有string字符串,有则返回字符串位置,没有则返回-1
index.html
<wxs module="tools" src="../../function.wxs" /> <view class="cu-tag line-green" style="font-size:10px" wx:if='{{tools.arrayfind(actarry[index].form.reward,"志愿时长")!==-1}}'>志愿时长</view>
将wxs在wxml中引用,其中src是路径,要使用相对路径,module是在使用wxs时的模块名,
模块名.暴露出来的方法(参数)
第一次写文章,如果对大家有帮助可以为我点个赞,如果有错误希望大家指正,也是对我有很大帮助
相关文章推荐
- 微信小程序如何将本地图片文件上传到服务器?wx.chooseImage& wx.uploadFile方法使用案例以及微信小程序如何获取input框的值。
- 微信小程序wx.navigateTo方法里的events参数使用详情及场景
- 微信小程序使用三元运算符代替wx:if
- 微信小程序提取公用函数到util.js及使用方法示例
- 微信小程序:如何在{{}}中使用函数?WXML+WXS
- 关于微信小程序使用不了push()方法的解决办法
- 微信小程序学习笔记-2.1 wx.for 和 wx.if 的使用
- 微信小程序节点查询方法:wx.createSelectorQuery()的使用场景与注意事项
- 微信小程序使用三元运算符代替wx:if
- 微信小程序出现wx.navigateTo页面不跳转问题的解决方法
- 微信小程序wx.navigateTo方法里的events参数使用详情及场景
- 微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
- 微信小程序 setData使用方法及常用错误解决办法
- 说一下你的程序在ios5里面遇到的兼容性问题以及解决方法吧
- vs2008 std::fstream以及std::ifstream打开中文路径名失败的解决方法
- php程序中不能使用mb_开头的函数解决办法
- Hadoop使用常见问题以及解决方法5
- 使用java mail 包收发中文邮件的编码,解码问题以及解决方法
- 近几天 用微芯力科的板子 调试usb虚拟串口的程序,发现一些问题以及解决方法。和大家共享
- Hadoop使用常见问题以及解决方法(转载)