微信小程序開發--條件渲染詳解 - 新聞資訊 - 雲南小程序開發|雲南軟件開發|雲南網站建設-昆明融晨信息技術有限公司

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不(bù)管是(shì)網站,軟件還是(shì)小程序,都要(yào / yāo)直接或間接能爲(wéi / wèi)您産生價值,我們在(zài)追求其視覺表現的(de)同時(shí),更側重于(yú)功能的(de)便捷,營銷的(de)便利,運營的(de)高效,讓網站成爲(wéi / wèi)營銷工具,讓軟件能切實提升企業内部管理水平和(hé / huò)效率。優秀的(de)程序爲(wéi / wèi)後期升級提供便捷的(de)支持!

您當前位置>首頁 » 新聞資訊 » 小程序相關 >

微信小程序開發--條件渲染詳解

發表時(shí)間:2021-5-11

發布人(rén):融晨科技

浏覽次數:61

這(zhè)裏先寫一下布局的(de)代碼和(hé / huò)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">我的(de)位置: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}}">
        

相關案例查看更多