小程序模板网

首页 小程序模板网 开发文档 小程序开发教程正文

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

发布时间：2017-12-29 18:05 所属栏目：小程序开发教程

这里先写一下布局的代码和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;
}
.end_content{
    width: 100%;
    height: 60rpx;
    background: yellow;
    margin: 10rpx 0;
}
.find_box{
    width: 100%;
    height: 100rpx;
}
.find{
    width: 80%;
    height: 60rpx;
    background: #3cc51f;
}
.find_text{
    color: #fff;
}
.start_search_box{
    width: 100%;
    height: 180rpx;
    margin-bottom: 30rpx;
}
.searches{
    width: 100%;
    height: 120rpx;
    border: 2rpx solid #ccc;
}
.search{
    width: 90%;
    height: 60rpx;
    border: 2rpx solid #ccc;
    border-radius: 15px;
}
.search_text{
    background: #9f9;
}
.search_back{
    background: #9f9;
}
.location_box{
    width: 100%;
    height: 50rpx;
    border: 2rpx solid #ccc;
}
.location{
    width: 90%;
    height: 50rpx;
    display: flex;
}

.end_search_box{
    width: 100%;
    height: 120rpx;
    border-bottom: 2rpx solid #ccc;
}
.end_search{
    width: 90%;
    height: 60rpx;
    border-radius: 30rpx;
    border: 2rpx solid #ccc;
}
/*查询模块*/
.inquiry_box{
  width: 100%;
  height: auto;
  background: #f99;
}
.inquiry_content{
  width: 90%;
  height: auto;
}
.inquiry_content_list{
  width: 100%;
  height: 60rpx;
}

效果图，可以查看微信小程序中的图吧公交


易优小程序（企业版）+灵活api+前后代码开源 码云仓库:starfork
本文地址：https://www.eyoucms.com/wxmini/doc/course/18307.html 复制链接 如需定制请联系易优客服咨询：800182392 点击咨询

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

产品

服务

帮助

关于

工作日 8:30-12:00 14:30-18:00
周六及部分节假日提供值班服务

联系我们
QQ在线咨询