微信小程序在页面(wxml)使用JS方法(function)

作者:outlela  来源:本站原创   发布时间:2020-7-14 9:10:9

在自定义比较丰富的场景下,需要在微信小程序的页面层(wxml)调用javascript方法(function)来满足场景需求,今天恰好遇到了记录下来,以备后用。


 1.在项目中新建后缀为.wxs的文件,案例代码如下:

function firstImg(a){
  var img=a.split(',');
  return img[0]
}
module.exports = {  
  firstImg:firstImg
}

2.在wxml页面引入第一步的.wxs文件:

<wxs module="util" src="../../helper/util.wxs"></wxs>

要注意的是module="util",其中util即为对象名。

3.wxml页面使用如下:

<view class="bg-img only-img" data-url="{{preurl+util.firstImg(item.Images)}}" style="background-image:url({{preurl+util.firstImg(item.Images)}});" >
</view>

3.案例分析:由于item.Images存入数据库为简单的以逗号(,)隔开的假数组,现在的需求是如果有就取第一张。由于是for下输出,不想在js文件里面多循环几次,所以需要在页面完成,最终达到的效果如下:

image.png

但其实此条动态,有9张图片:

image.png


希望能帮助大家,提升微信小程序的开发效率!


*本文最后修改于:2020-7-14 9:43:3
本文标签: 微信小程序 wxml JS方法 function
本文由本站原创发布, 本文链接地址:https://outlela.com/Code/81.html
转载或引用请保留地址并注明出处:outlela.com