云服务器 199 / 年,新老同享,开发者力荐特惠渠道
阿里云推广

微信小程序模板里面如何使用函数

  • 内容
  • 评论
  • 相关

模板文件为:wuliu.wxml

代码如下:

<view class="nav">
    <view class="fanhui" bindtap="showBack">
        <image src="../images/fanhui.png"></image>
    </view>
    <view class="top">快递轨迹</view>
</view>
<wxs module="fun1">
    var str2json = function (str) {
        //console.log("页面内部函数执行了!")
        return JSON.parse(str);
    }
    module.exports.str2json = str2json;
</wxs>

<!-- 外层pages -->
<view class='pages'>

    <!-- 头部 -->
    <view wx:if="{{list.length!=0}}" wx:for="{{list}}" wx:for-item="list" wx:key="yy">
        <view class='head'>
            <label class='head_title'>{{list.DeliveryName}}:{{list.DeliveryNum}}</label>
        </view>
        <!-- 追踪 -->
        <view class='logisit' wx:if="{{fun1.str2json(list.show_value).length!=0}}" wx:for="{{fun1.str2json(list.show_value)}}" wx:for-item="list1" wx:key="qq">
            <!-- 列表 -->
            <view class='list'>
                <view class='list_name_page'>
                    <!-- 列表名称 -->
                    <lable class='list_name'>{{list1.context}}</lable>
                </view> 
                <!-- 时间 -->
                <view class='list_dates_page'>{{list1.time}}</view>

            </view>
            <!-- 列表底线 -->
            <view class='writes'></view>
        </view>

        <view wx:if="{{fun1.str2json(list.show_value).length==0}}" class="no_dingdan" style="margin-top:30px;">
            <view style="margin-top:50rpx">暂无轨迹信息!</view>
        </view>


    </view>

    <view wx:if="{{list.length==0}}" class="no_dingdan" style="margin-top:30px;">
        <image src="/pages/images/luojitu.png"></image>
        <view style="margin-top:50rpx">暂无快递信息!</view>
    </view>

</view>

上述案例是,模板里面两层的循环,第二层要被循环的是个json字符串,要先把他转化成json对象,然后才能在内层继续循环。如上图红色部分,函数被定义在<wxs>标签内。

本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:微信小程序模板里面如何使用函数 - https://wlphp.com/?post=337

发表评论

电子邮件地址不会被公开。 必填项已用*标注