关键词搜索

全站搜索×
密码登录在这里
×
注册会员

已有账号? 请点击

使用其他方式登录

微信小程序在模板循环使用filter过滤器几种方式

发布2020-11-06浏览1666次

详情内容

由于微信小程序生态略为封闭,修改源码不太实际,所以{{}}内的管道符号写法目前很难实现,那么我们是否能在{{}}内调用函数来模仿filter的功能呢?然而微信小程序和Vue Angular等不同,并不能在{{}}内调用自定义函数,甚至toString() parseInt()等js内置函数都无法调用,这一点也坑害了不少开发人员。

但如今有了WXS模块,我们可以用其编写脚本函数,在wxss页面中引入并调用,官方文档戳这里->WXS·小程序

我们来写两个过滤器函数,一个实现日期格式,另一个实现金额保留两位小数。

首先在utils目录下创建一个filter.wxs   

在filter.js中编写这两个函数并导出:

// filter.wxs
var dateFormat = function(date) {
    var dates = date.split('/');
    return dates[0] + "年" + dates[1] + "月" + dates[2] + "日";
}
var moneyFormat = function(money) {
    return money.toFixed(2);
}
 
/*
 * 导出
 */
module.exports = {
    dateFormat: dateFormat,
    moneyFormat: moneyFormat
}

index.js中定义date和money:

//index.js  
Page({
    data: {
        date: "2018/8/5",
        money:280.8888888
    }
})

index.wxss中引入wxs模块并使用:

<!-- page/index/index.wxml -->
<!-- src引入filter.wxs, module给模块起名 -->
<wxs src="../../utils/filter.wxs" module="filter" />
<!-- 调用filter模块里的dateFormat函数 -->
<view>{{filter.dateFormat(date)}}</view>
<!-- 调用filter模块里的moneyFormat函数 -->
<view>{{filter.moneyFormat(money)}}</view>


点击QQ咨询
开通会员
返回顶部
×
  • 微信支付
  • 支付宝付款
微信扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载