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

这里先写一下布局的代码和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>-->

js代码：

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    city: '北京',
    startData: '从哪儿出发',
    endData: '要去哪儿',
    address: '同城街',
    condition: true,
    start: false,
    end: false,
    isShow: false,
    isTrue: false,
    isInquiry: false,
    city: "深圳市",
    inputData: "", //search页面输入框的数据
    array: [],
    arrays: []
  },
  /**
   *  函数名：findEvent
   *  功能：当点击主页查询按钮时，
   *  如果起点和终点没有数据的话,需要提示请输入地点
   *  如果有起点和终点的话，需要隐藏主页，显示新的页面(提供路线的页面)
   */
  findEvent: function(){
    let _this = this;
    console.log(this.data.array.length);
    if( this.data.array.length > 0 && this.data.arrays.length > 0){
      _this.setData({
        condition: false,
        isInquiry: true,
      })
    }else{
      wx.showLoading({
        title: '请选择地点',
      })
      setTimeout(function () {
        wx.hideLoading()
      }, 2000)
    }
  },
  /**
   *  函数名：startEvent
   *  功能：主页面模块隐藏
   *       起点页面显示
   */
  startEvent: function(){
    //console.log("aa");
    //console.log(this);
    this.setData({
      condition: false,
      start: true,

    })
  },
  /**
   *  函数名：endEvent
   *  功能： 主页面模块隐藏
   *        终点页面显示
   */
  endEvent: function(){
    //console.log("bb");
    this.setData({
      condition: !this.data.condition,
      end: !this.data.end
    })
  },
  /**
   *  函数名：startDeleteEvent
   *  功能：点击起点输入框中的back按钮返回到主页面
   *       
   */
  startBackEvent: function(){
    this.setData({
      condition: true,
      start: false,
      isShow: false
    })
  },
  /**
   *  函数名：endBackEvent
   *  功能：点击终点输入框中的back按钮终返回主页面
   * 
   */
  endBackEvent: function(){
    //console.log("endDeleteEvent");
    this.setData({
      condition: true,
      end: false
    })
  },
  /**
   *  函数名：startInputEvent
   *  功能： 在请输入起点框中输入内容时，触发此函数
   */
  startInputEvent: function(e){
    console.log("startInputEvent");
    var _this = this;
    let data = e.detail.value;
    //console.log("data",data);
    this.setData({
      isShow: true,
    })
    wx.request({
      //非真实接口，仅为示例
      url: "https://w.mmm.com/search2016/search/keywords",
      data: {
        keywords: data,
        city: 110000
      },
      method: 'GET',
      success: function(res){
        console.log(res.data.pois);
        //console.log(res.data.pois[0].city);
        _this.setData({
          array: res.data.pois
        })
      },
      fail: function(){
        console.log("请求失败");
      }
    })
  },
  /**
   *  函数名：endInputEvent
   *  功能：在请输入终点框中输入内容时触发此函数
   */
  endInputEvent: function(e){
    console.log("endInputEvent");
    var _this = this;
    let data = e.detail.value;
    console.log(data);
    this.setData({
      isTrue: true,
    })
    wx.request({
      url: 'https://w.mmm.com/search2016/search/keywords',
      data: {
        keywords: data,
        city: 110000
      },
      method: 'GET',
      success: function(res){
        //console.log(res);
        _this.setData({
          arrays: res.data.pois
        })
      },
      fail: function(){
        console.log("请求失败！");
      }
    })
  },
  /*
   *  函数名：startItemEvent
   *  功能： 点击渲染到的每一项，然后替换起点里面的值
   *  遇到的问题：
   *  1.怎么样获取每一项的值，然后改变起点的位置
   *  用 data-index = {{index}}
   *  2.如何才能获取我点击那一项对应的值
   *  获取i
   *  var i = e.target.dataset.index;
   *  不懂的话可以打出e看是什么东西
   *  
  */
  startItemEvent: function(e){
    console.log(e);
    var i = e.target.dataset.index;
    var itemList = this.data.array;
    console.log("itemList",itemList[i].name);
    var startItemData = itemList[i].name;
    this.setData({
      isShow: false,
      start: false,
      condition: true,
      startData: startItemData
    })
  },
  /**
   *  函数：endItemEvent
   *  功能：当点击渲染出来的每一项时，让去哪儿改变数据
   */
  endItemEvent: function(e){
    console.log(e);
    var i = e.target.dataset.index;
    var itemList = this.data.arrays;
    console.log("itemList", itemList[i].name);
    var endItemData = itemList[i].name;
    this.setData({
      condition: true,
      end: false,
      isTrue: false,
      endData: endItemData
    })
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  testEvent: function(){
    wx.navigateTo({
      url: "/pages/test/test"
    })
  },
  onLoad: function () {
    console.log('onLoad')
    //console.log(this);
    var that = this;
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

样式代码：

/**index.wxss**/
.content{
    width: 100%;
    height: 100%;
}
.current_box{
    width: 100%;
    height: 60rpx;
    border-bottom: 2rpx solid #ccc;
}
.start_box{
    width: 100%;
    height: 80rpx;
    border-bottom: 2rpx solid #ccc;
}
.start_show_box{
    width: 100%;
    height: auto;
    background: #f99;
}
.start_show_content{
    width: 90%;
    height: auto;
}
.start_content{
    width: 100%;
    height: 60rpx;
    background: yellow;
    margin: 10rpx 0;
}
.end_box{
    width: 100%;
    height: 80rpx;
    border-bottom: 2rpx solid #ccc;
}
.end_show_box{
    width: 100%;
    height: auto;
    background: #f99;
}
.end_show_content{
    width: 90%;
    height: auto;
 
                 
                邀请 
              
 
               
              
 
            
             
                        
 
              




路过




雷人




握手




鲜花




鸡蛋






 
            

            
 
            

                  原作者: 模板之家 
                  来自: 网络收集 
                   
                   
                              
                        
          
          

  
      
  
  	

上一篇：小程序可以显示群名称啦！
下一篇：有关小程序wx.navigateTo层叠5次限制
  
        
      
      

    
       
       
      

  	

       
全部回复(0)
            
  
 
    
     
     
    

        
      
  


        

    

     






                
           
    
    
    
    

   
    
         

    
     
        
  
 
  

            
相关分类

小程序开发
php教程
mysql教程
js教程
服务器运维
经验杂谈
linux命令



    

  

    

      
      推荐阅读
  
  

    

      

          

            

              

            
            mysql分页操作
        

          

            

              

            
            update是什么关键字
        

          

            

              

            
            MySQL错误1171如何解决
        

          

            

              

            
            深入理解MySQL数据类型：探索基本数据类型的细节和限制
        

          

            

              

            
            快速掌握MySQL常用数据类型：常见数据类型及其应用场景一览
        

          

            

              

            
            了解MySQL的主要数据类型：熟悉常用的数据类型有哪些
        
    
  

    
 
      
 
    
  



 
  
 


 

 

     




    

        
首页
        
分类
        

                
索引
                
我的
            




  

  

    

      
Copyright © Comsenz Inc. Powered by Discuz!X3.5 


 蜀ICP备12013697号 
    
    

       
 微信：xu08290201   QQ：75283535 
    
  
  
 

 



 
 



 

 
 
 

 
 

 

 

 

 

 



  


 
 
返回顶部