微信小程序三级级联,自定义json数据源

原创
07/08 16:16
阅读数 123

先上效果图

<!--index.wxml-->

  <view class="infoText">{{province}} {{city}} {{county}}</view> 

  <view class="aaaa" >
  <button class="animation-button" bindtap="translate">选择城市</button>
  </view>
      
  <view class="animation-element-wrapper" animation="{{animation}}" style="visibility:{{show ? 'visible':'hidden'}}" bindtap="hiddenFloatView" data-id="444">
     <view class="animation-element" catchtap="nono">
        <text class="left-bt" catchtap="hiddenFloatView" data-id="555">取消</text>
        <text class="right-bt" catchtap="hiddenFloatView" data-id="666">确定</text>
          <view class="line"></view> 

        <picker-view indicator-style = "height: 50rpx;" value="{{value}}" bindchange="bindChange" catchtap="nono">
        <!--省-->
        <picker-view-column>
           <view wx:for="{{provinces}}" wx:for-item="sheng" wx:key="">
             {{sheng.name}}
          </view>
        </picker-view-column>
        <!--地级市-->
        <picker-view-column>
          <view wx:for="{{citys}}" wx:key="">
            {{item.name}}
          </view>
        </picker-view-column>
        <!--区县-->
        <picker-view-column>
          <view wx:for="{{countys}}" wx:key="">
            {{item.name}}
          </view>
        </picker-view-column>
        </picker-view>
    </view>
  </view>
/**index.wxss**/
page{
  background-color: rgba(255, 255, 255, 1); 
}

.infoText{
    margin-top: 20rpx;
    text-align: center;
    width: 100%;
    justify-content: center; 
}

picker-view{
  background-color: white;
  padding: 0;
  width: 100%; 
  height: 380rpx;
  bottom: 0;
  position: fixed;
}

picker-view-column view{
  vertical-align:middle; 
  font-size: 28rpx;
  line-height: 28rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------- */

.animation-element-wrapper {
  display: flex;  
  position: fixed;
  left: 0;
  top:0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.animation-element {
  display: flex;
  position: fixed;
  width: 100%;
  height: 470rpx;
  bottom: 0;
  background-color: rgba(255, 255, 255, 1);
}

.animation-button {
  margin-top: 20rpx;
  top:20rpx;
  width: 400rpx;
  height: 100rpx; 
  line-height: 100rpx; 
  align-items:center;
}


text{
  color: #999999;
  display: inline-flex;  
  position: fixed;
  margin-top: 20rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  font-size: 34rpx;
  font-family: Arial, Helvetica, sans-serif;
}

.left-bt{
  left: 30rpx;
}
.right-bt {
  right: 30rpx;
}

.line{
  display: block;
  position: fixed;
  height: 1rpx;
  width: 100%;
  margin-top: 89rpx; 
  background-color: #eeeeee;
}

function getAreaInfo(callBack){
var str = [{"level":1,"name":"浙江省","pId":0,"id":1},{"level":2,"name":"杭州市","pId":1,"id":2},{"level":3,"name":"西湖区","pId":2,"id":4},{"level":4,"name":"翠苑街道","pId":4,"id":5},{"level":4,"name":"三墩镇","pId":4,"id":7},{"level":3,"name":"江干区","pId":2,"id":8},{"level":3,"name":"拱墅区","pId":2,"id":9},{"level":4,"name":"凯旋街道","pId":8,"id":10},{"level":4,"name":"下沙街道","pId":8,"id":11},{"level":4,"name":"西溪街道","pId":4,"id":12},{"level":4,"name":"古荡街道","pId":4,"id":13},{"level":4,"name":"小河街道","pId":9,"id":14},{"level":4,"name":"湖墅街道","pId":9,"id":15},{"level":4,"name":"上塘街道","pId":9,"id":16}];

  callBack(str);
}
module.exports.getAreaInfo = getAreaInfo;
//index.js
//获取应用实例
// var app = getApp()
// var util = require('../../utils/util.js')
var area = require('../../utils/area.js')

var areaInfo = [];//所有省市区县数据

var provinces = [];//省

var citys = [];//城市

var countys = [];//区县

var index = [0, 0, 0];

var cellId;

var t = 0;
var show = false;
var moveY = 200;

Page({
  data: {
    show: show,
    provinces: provinces,
    citys: citys,
    countys: countys,
    value: [0, 0, 0]
  },
  //滑动事件
  bindChange: function (e) {
    var val = e.detail.value
    // console.log(e)
    //判断滑动的是第几个column
    //若省份column做了滑动则定位到地级市和区县第一位
    if (index[0] != val[0]) {
      val[1] = 0;
      val[2] = 0;
      getCityArr(val[0], this);//获取地级市数据
      getCountyInfo(val[0], val[1], this);//获取区县数据
    } else {    //若省份column未做滑动,地级市做了滑动则定位区县第一位
      if (index[1] != val[1]) {
        val[2] = 0;
        getCountyInfo(val[0], val[1], this);//获取区县数据
      }
    }
    index = val;

    console.log(index + " => " + val);

    //更新数据
    this.setData({
      value: [val[0], val[1], val[2]],
      province: provinces[val[0]].name,
      city: citys[val[1]].name,
      county: countys[val[2]].name
    })

  },
  onLoad: function (options) {
    cellId = options.cellId;
    var that = this;
    var date = new Date()
    console.log(date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日");

    //获取省市区县数据
    area.getAreaInfo(function (arr) {
      console.log("arr"+arr)
      areaInfo = arr;
      //获取省份数据
      getProvinceData(that);
    });

  },
  // ------------------- 分割线 --------------------
  onReady: function () {
    this.animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 0,
      timingFunction: "ease",
      delay: 0
    }
    )
    this.animation.translateY(200 + 'vh').step();
    this.setData({
      animation: this.animation.export(),
      show: show
    })
  },
  //移动按钮点击事件
  translate: function (e) {
    if (t == 0) {
      moveY = 0;
      show = false;
      t = 1;
    } else {
      moveY = 200;
      show = true;
      t = 0;
    }
    // this.animation.translate(arr[0], arr[1]).step();
    animationEvents(this,moveY, show);
    
  },
  //隐藏弹窗浮层
  hiddenFloatView(e){
    console.log(e);
    moveY = 200;
    show = true;
    t = 0;
    animationEvents(this,moveY, show);

  },
  //页面滑至底部事件
  onReachBottom: function () {
    // Do something when page reach bottom.
  },
})

//动画事件
function animationEvents(that,moveY,show){
  console.log("moveY:" + moveY + "\nshow:" + show);
  that.animation = wx.createAnimation({
    transformOrigin: "50% 50%",
    duration: 400,
    timingFunction: "ease",
    delay: 0
  }
  )
  that.animation.translateY(moveY + 'vh').step()

  that.setData({
    animation: that.animation.export(),
    show: show
  })

}

// ---------------- 分割线 ---------------- 

//获取省份数据
function getProvinceData(that) {
  var s;
  provinces = [];
  var num = 0;
  for (var i = 0; i < areaInfo.length; i++) {
    s = areaInfo[i];
    if (s.level == "2") {
      provinces[num] = s;
      num++;
    }
  }
  that.setData({
    provinces: provinces
  })

  //初始化调一次
  getCityArr(0, that);
  getCountyInfo(0, 0, that);
  // that.setData({
  //   province: "杭州市",
  //   city: "西湖区",
  //   county: "翠苑街道",
  // })

}

// 获取地级市数据
function getCityArr(count, that) {
  var c;
  citys = [];
  var num = 0;
  for (var i = 0; i < areaInfo.length; i++) {
    c = areaInfo[i];
    if (c.level == "3" && c.pId == provinces[count].id ) {
      citys[num] = c;
      num++;
    }
  }
  if (citys.length == 0) {
    citys[0] = { name: '' };
  }

  that.setData({
    // city: "",
    citys: citys,
    value: [count, 0, 0]
  })
}

// 获取区县数据
function getCountyInfo(column0, column1, that) {
  var c;
  countys = [];
  var num = 0;
  for (var i = 0; i < areaInfo.length; i++) {
    c = areaInfo[i];
    if (c.level == "4" && c.pId == citys[column1].id) {  
      countys[num] = c;
      num++;
    }
  }
  if(countys.length == 0){
    countys[0] = {name:''};
  }
  that.setData({
    // county: "",
    countys: countys,
    value: [column0, column1, 0]
  })
}
JSONArray jar = new JSONArray();

		List<Area> areas = areaMapper.findAllArea();
		for (int i = 0; i < areas.size(); i++) {
			JSONObject json = new JSONObject();
			Area m = areas.get(i);
			json.put("id", m.getAreaId());
			json.put("pId", m.getParentId());
			json.put("name", m.getAreaName());
			json.put("level", m.getLevel());
			jar.add(json);
		}

 

鉴于微信小程序没有三级级联,所以自己做了一个三级。有些无用代码没有清掉,数据格式是从后来传过来的。

 

欢迎指正

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部