收藏
回答

怎么把template模板上的引入到一个页面显示

问题模块
API和组件

index.wxml:代码

<import src="/wxSearch/wxSearch.wxml"/>


<view class="wxSearch-section">

  <view class="wxSearch-pancel">

    <input bindinput="wxSearchInput" bindfocus="wxSerchFocus" value="{{wxSearchData.value}}" bindblur="wxSearchBlur" class="wxSearch-input" placeholder="搜索" />

    <button class="wxSearch-button" bindtap="wxSearchFn" size="mini" plain="true">搜索</button>

  </view>

</view>

<template is="wxSearch" data="{{wxSearchData}}"/>




模板代码:wxSearch.wxml:

<template name="wxSearch">

  <view class="wxSearch" bindtap="wxSearchTap"  style="display:{{wxSearchData.view.isShow ? 'block':'none'}};height:{{wxSearchData.view.seachHeight}}px;top:{{wxSearchData.view.barHeight}}px;">

    <view  class="wxSearchInner">


        <view class="wxSearchMindKey">

            <view class="wxSearchMindKeyList">

                <block wx:for="{{wxSearchData.mindKeys}}">

                    <view class="wxSearchMindKeyItem" bindtap="wxSearchKeyTap" data-key="{{item}}">{{item}}</view>

                </block>

            </view>

        </view>


        <view class="wxSearchKey" style="display:{{wxSearchData.view.isShowSearchKey ? 'block':'none'}}">

            <text class="wxSearchTitle">热门搜索</text>

            <view class="wxSearchKeyList">

                <block wx:for="{{wxSearchData.keys}}">

                    <view class="wxSearchKeyItem" bindtap="wxSearchKeyTap" data-key="{{item}}">{{item}}</view>

                </block>

            </view>

        </view>

        <view class="wxSearchHistory" style="display:{{wxSearchData.view.isShowSearchHistory ? 'block':'none'}}">

            <text class="wxSearchTitle">搜索历史</text>

            <view wx:if="{{wxSearchData.his[0]}}" class="wxSearchHistoryList">

                <block wx:for="{{wxSearchData.his}}">

                    <view class="wxSearchHistoryItem">

                        <text class="wxSearchHistoryItemText" bindtap="wxSearchKeyTap" data-key="{{item}}">{{item}}</text> 

                        <text class="wxSearchHistoryItemDel" bindtap="wxSearchDeleteKey" data-key="{{item}}" data-key="{{item}}">删除</text>

                    </view>

                </block>

                <view class="wxSearchDeleteAllBtn" bindtap="wxSearchDeleteAll">清除历史</view>

            </view>

            <view wx:else>

                <view class="wxSearchHistoryEmpty">搜索历史为空</view>

            </view>

        </view>

    </view>

  </view>

</template>


最后一次编辑于  2017-03-14
回答关注问题邀请回答
收藏

1 个回答

  • 天下雪|风雷生变
    天下雪|风雷生变
    2017-03-14

    官方文档内有描述https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/template.html


    也可以参考:http://www.wxapp-union.com/portal.php?mod=view&aid=1525

    2017-03-14
    赞同
    回复