• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序开发 - 模板(template)使用,数据加载,点击交互

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

  微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用。结果在数据渲染那懵逼了。按照官网上对模板的说明和对数据的加载。

1、定义模板

  使用name属性,作为模板的名字。然后在<template/>内定义代码片段,如:

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">  //此处的name 有ID的意味,便于其他页面加载该模板时使用和查找
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

2、使用模板

  先将模板的wxml文件wxss文件路劲链接 导入到需要使用模板的wxml文件和wxss文件内,然后在需要导入模板的wxml文件内使用 is属性,声明需要的使用的模板,然后将模板所需要的data传入,如:

<import src="../template/msgItem/msgItem.wxml"/>    
<template is="msgItem" data="{{...item}}"/>  <!--{{...item}}  ...是将数据展开,即这样将数据传输到模板时,实际上是将item按键值对展开-->
Page({
    data: {
        item: {
            index: 0,
            msg: \'this is a template\',
            time: \'2016-09-15\'
        }
    }
});
@import "../template/msgItem/msgItem.wxss";

  is属性 可以使用Mustache语法,来动态决定具体需要渲染哪个模板:

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{item % 2 == 0 ? \'even\' : \'odd\'}}"/>
</block>

3、模板数据传入

  在页面的 template 标签中将模板所需要的data传入,如:

<!--展开:-->
<template is="lookRecord"  data="{{...followRecords}}"/>

  展开:传入的数据已经按键值对模式被一一展开,直接通过对象的属性就能获取对象中的值,这点跟VUE的模板使用差不多。但如果模板中存在 wx:for="{{followRecords}}" 运用,即传入的对象中某个属性的值是一个数组Array,系统则会报渲染结构错误,找不到属性。

,这时这种展开式传值就不行了。

 

  那就采用不展开的形式。不展开:传入的数据在模板中按照属性一对一调用的方式获取数据,如:

<!--不展开:-->
<template is="lookRecord"  data="{{lookRecord}}"/>
<view class="information-feedback-area" wx:for="{{lookRecord.feedbackBasicInfor}}" wx:for-index="index" wx:for-item="indexData">
    <view class="information-feedback-options">
        <view class="information-feedback-item">
            <text class="information-options-title">{{indexData[0].option}}</text>
            <image class="information-options-image" src="{{indexData[0].icon}}"></image>
        </view>
    </view>
    <view class="information-feedback-options">
        <view class="information-feedback-item">
            <text class="information-options-title">{{indexData[1].option}}</text>
            <image class="information-options-image" src="{{indexData[1].icon}}"></image>
        </view>
    </view>
</view>

4、模板点击交互

  在理清楚数据的获取和渲染后,模板中绑定事件,实现正常交互,就是最后的问题了。由于模板(template)没有自己的JS文件,所以模板的交互功能方法都是写在引用该模板的页面的JS控制模块内。如:

  我在 detailedInformation 页面调用了 basicInformation模板,那么 模板basicInformation 内的所有交互功能都是写在detailedInformation.js内的。下面定义事件,如:

//detailedInformation.js
templateInteraction: function () {
    var tampData = this.data.item;
    tampData.clickAction = "nodeOperation ";
    this.setData({item: tampData})
},
nodeOperation: function () {
    console.log("模板交互功能方法执行!")
},

  然后在模板中绑定该事件,如:

<template is="basicInformation" data="{{item}}"></template>
<template name="basicInformation">
    <view class="information-container">
        <view class="information-text-area">
            <view style="float: left;width: 19%">
                <text class="information-text-title">电\r\t\r\t\r\t\r\t\r\t\r\t话1:</text>
            </view>
            <view style="float: left;width: 81%">
                <text class="information-text-info" value="{{basicInformation.pho1}}">{{basicInformation.phone1}}</text>
                <image class="information-text-image" src="{{phone}}" id="{{basicInformation.pho1}}"
                       bindtap="{{item.clickAction}}"></image>
            </view>
        </view>
        <view class="information-text-area">
            <view style="float: left;width: 19%">
                <text class="information-text-title">电\r\t\r\t\r\t\r\r\t\r\t话2:</text>
            </view>
            <view style="float: left;width: 81%">
                <text class="information-text-info" value="{{basicInformation.pho2}}">{{basicInformation.phone2}}</text>
                <image class="information-text-image" src="{{phone}}" id="{{basicInformation.pho2}}"
                       bindtap="{{item.clickAction}}"></image>
            </view>
        </view>
    </view>
</template>

  这样点击模板中的具体元素就可以调用该方法了。虽然这样可以调用事件方法,但是仅适用于结构简单,且是循环出来的节点(因为基本功能都一样,操作也基本相同)。但对于结构复杂,功能需求不同的节点则不能适用。这个时候就只能具体节点具体功能具体定义事件了。

  当然绝大部分模板的交互功能都不多,既然都在用模板了,那么肯定是以数据展示为主,没事去操作它干嘛。包含大量操作和交互功能的直接写页面,谁还整模板,自己坑自己么。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
【微信小程序】template模板使用详解发布时间:2022-07-18
下一篇:
小程序 template 的使用发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap