微信小程序开发--条件渲染详解
发表时间:2021-5-11
发布人:葵宇科技
浏览次数:53
这里先写一下布局的代码和js效果代码,细节有空再补充
<block wx:if="{{condition}}">
<view class="content">
<view class="current_box center">
<view class="current_city center">
<text>当前城市:text>
<text>{{city}}text>
view>
view>
<view class="start_box text_center" bindtap="startEvent">
<text class="start">起点text>
<text class="set_out">{{startData}}text>
view>
<view class="end_box text_center" bindtap="endEvent">
<text>终点text>
<text>{{endData}}text>
view>
<view class="find_box center">
<view class="find center" bindtap="findEvent">
<text class="find_text">查询text>
view>
view>
view>
block>
<block wx:if="{{start}}">
<view class="start_search_box">
<view class="searches center">
<view class="search text_center">
<text class="search_text center">searchtext>
<input class="search_input center" type="text" placeholder="请输入起点" bindinput="startInputEvent"/>
<text class="search_back center" bindtap="startBackEvent">backtext>
view>
view>
<view class="location_box center">
<view class="location">
<text class="location_text align_center">我的位置:text>
<text class="location_city align_center">{{address}}text>
view>
view>
view>
block>
<block wx:if="{{isShow}}">
<view class="start_show_box center">
<view class="start_show_content">
<view class="start_content align_center" wx:key="unique" bindtap="startItemEvent" wx:for="{{array}}" data-index="{{index}}">
{{index}}:{{item.name}}
view>
view>
view>
block>
<block wx:if="{{end}}">
<view class="end_search_box center">
<view class="end_search text_center">
<text class="search_text">searchtext>
<input type="text" placeholder="请输入终点" bindinput="endInputEvent" />
<text class="search_back" bindtap="endBackEvent">backtext>
view>
view>
block>
<block wx:if="{{isTrue}}">