微信小程序实现过滤器功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序实现过滤器功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

如果是 js 里面对数据进行过滤处理直接写一个方法然后调用就可以了，如果想在 wxml 里面使用过滤的话则需要借助 wxs 来实现；

1、新增一个 wxs 为后缀的文件 filter.wxs

var formatDate = function (timestamp,option) {
  var date = getDate(parseInt(timestamp));
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var hour = function(){
    if (date.getHours()<10){  //补‘0’
      return '0' + date.getHours()
    }
    return date.getHours();
  }
  var minute = function () {
    if (date.getMinutes() < 10) {
      return '0' + date.getMinutes()
    }
    return date.getMinutes();
  }
  var second = function () {
    if (date.getSeconds() < 10) {
      return '0' + date.getSeconds()
    }
    return date.getSeconds();
  }
  if (option=='notime'){  //不需要时间
    return year + '-' + month + '-' + day;
  }
  return year + '-' + month + '-' + day + ' ' + hour() + ':' + minute() + ":" + second();
}
module.exports = {
  formatDate: formatDate,
};

2、在需要使用的 wxml 页面引入

<wxs src='filter.wxs' module='filter' />
<view>日期：{{filter.formatDate(要过滤的时间戳)}}</view>

使用 wxs 标签来引入，src 文件的路径，module 则是声明一下这个过滤器的调用名称；

3、注意
wxs 与 js 是不同的语言，有自己的语法。所以在写方法的时候需要注意有些 js 的 api 是无法使用的；比如：new Date() 在 wxs 是不支持的，但是小程序提供了一个全局函数 getDate(）代替。还有，wxs 不支持任何ES6的语法。文章来源地址https://www.toymoban.com/news/detail-623310.html

到了这里，关于微信小程序实现过滤器功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！