欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序开发--条件渲染详解

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:505

HTML5影视传媒文化公司类网

2020-05-12   浏览:502

微信小程序开发--条件渲染详解

发布时间:2020-12-25  

这里先写一下布局的代码和js效果代码,细节有空再补充

<!--index.wxml--> <!--主页模块--> <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">search</text> <input class="search_input center" type="text" placeholder="请输入起点" bindinput="startInputEvent"/> <text class="search_back center" bindtap="startBackEvent">back</text> </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">search</text> <input type="text" placeholder="请输入终点" bindinput="endInputEvent" /> <text class="search_back" bindtap="endBackEvent">back</text> </view> </view> </block> <!--请输入终点-展示模块--> <block wx:if="{{isTrue}}"> <view class="end_show_box center"> <view class="end_show_content"> <view class="end_content align_center" bindtap="endItemEvent" wx:for="{{arrays}}" wx:key="unique" data-index="{{index}}"> {{index}}:{{item.name}} </view> </view> </view> </block> <!--查询路线模块--> <block wx:if="{{isInquiry}}"> <view class="inquiry_box center"> <view class="inquiry_content"> <view class="inquiry_content_list center"> {{startData}} -> {{endData}} </view> </view> </view> </block> <!--测试模块--> <!--<view class="test"> <text bindtap="testEvent">test</text> </view>-->