小程序WXS 模块的运用(自动实现大于1000m转为km)

153 阅读1分钟

小程序新增了一个WXS模块,将其中声明的变量或者函数运用于wxml页面,上代码:

如下是wxs文件中创建的函数,用module.exports对外暴露其内部的私有变量与函数

//将大于1000m的距离转换成km
module.exports={
  foo :function (val) {
    return (val / 1000 > 1) ? ((val / 1000).toFixed(2) + 'km') : (val + 'm')
  }
}

用<wxs src="../../utils/filter.wxs" module="filter" />将文件引入,在.wxs模块中引用其他 wxs 文件模块,可以使用 require 函数。

//引入需要的函数或者变量
<wxs src="../../utils/filter.wxs" module="filter" />
<button bindtap="myLocation">获取我的位置</button>
<view  wx:for="{{shopList}}" style="padding:10rpx;border-bottom:2rpx solid #ccc">
  <view>{{item.name}}</view>
  <view>{{item.address}}</view>
  //使用文件名+函数名调用,实现距离自动过滤
  <view>{{filter.foo(item.distance||0)}}</view>
</view>

页面效果