由于项目频繁用到三级联动,比如地区、时间、分类,这些网络上不能满足,所以我们通过后台调用的方式来实现
后台我使用的是PHP语言
目录结构:
|-client
|---pages
|-----index
|-------index.js //包含初始化数据和调用后台的数据,都在这里实现
|-------index.wxml
|-------index.json
|-------index.wxss
|-server
|---city.php服务端程序
项目下载地址:https://download.csdn.net/download/u014725495/10562636
index.wxml
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">地区</view>
</view>
<view class="weui-cell__bd">
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{
{multiIndex}}" range="{
{multiArray}}">
<view class="weui-input">
{
{multiArray[0][multiIndex[0]]}},{
{multiArray[1][multiIndex[1]]}},{
{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view></view>
index.js
// pages/area/area.js
var config = require('../../config')
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
wx.request({
url: config.service.host + '/city.php', //仅为示例,并非真实的接口地址
data: {
'method':'initData',
'type': 'province',
'fcode': '110000'
},
header: {
'content-type': 'application/json' // 默认值
},
success: function(res) {
console.log(res.data)
//util.showSuccess("获取成功")
var multiObj = jsonToObj(res.data.data); //把json格式变成对象
that.setData({
multiArray: res.data.multiArray, //一个由文字组成的二维数组,一共是三个层级,分别是第一级,第二级,第三级
multiIndex: res.data.multiIndex, //分别对应multiArray所需要指定的层级
objectMultiArray: multiObj
})
}
})
},
bindMultiPickerColumnChange: function(e) {
console.log('