您的位置:首页 > 移动开发 > 微信开发

解决微信小程序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时的模块名,
模块名.暴露出来的方法(参数)

第一次写文章,如果对大家有帮助可以为我点个赞,如果有错误希望大家指正,也是对我有很大帮助

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐