小程序城市多选组件的封装

 wxml页面

<scroll-view scroll-y="true" style="height:{{winHeight}}px" bindscroll="bindScroll" 
 scroll-into-view="{{scrollTopId}}" scroll-top="{{scrollTop}}">

<view class="selection" wx:for="{{cityList}}" wx:key="initial">
    <view class="item_letter"  id="{{item.initial}}">{{item.initial}}</view>


<van-checkbox-group  value="{{ result }}" bind:change="onChange">
  <van-cell-group>
    <van-cell
      wx:for="{{item.cityInfo}}"
      wx:for-item="ct" 
      wx:key="index"
      title="{{ct.city}}"
      value-class="value-class"
      clickable
      data-index="{{ index }}"
      bind:click="toggle"
    >
      <van-checkbox
        catch:tap="noop"
        class="checkboxes-{{ index }}"
        name="{{ct.city}}"
      />
    </van-cell>
  </van-cell-group>
</van-checkbox-group>

  </view> 


</scroll-view>

js页面

var city = require("../../utils/city.js")
var app = getApp()
Page({
  data: {
    checked: false,
    result:[],
    searchLetter: [],
    showLetter: "",
    winHeight: 0,
    // tHeight: 0,
    // bHeight: 0,
    cityList: [],
    isShowLetter: false,
    scrollTop: 0,//置顶高度
    scrollTopId: '',//置顶id
    
  },
  onLoad: function (options) {
    console.log(options.pageNow)
console.log(options.selectedCity)

console.log(this.data.result)
    // 生命周期函数--监听页面加载
    var searchLetter = city.searchLetter;
    var cityList = city.cityList();
    var sysInfo = wx.getSystemInfoSync();
    var winHeight = sysInfo.windowHeight;
    var itemH = winHeight / searchLetter.length;
    var tempObj = [];
    for (var i = 0; i < searchLetter.length; i++) {
      var temp = {};
      temp.name = searchLetter[i];
      temp.tHeight = i * itemH;
      temp.bHeight = (i + 1) * itemH;
      tempObj.push(temp)
    }
    this.setData({
      winHeight: winHeight,
      itemH: itemH,
      searchLetter: tempObj,
      cityList: cityList
    })
    if(options.selectedCity!=""){
      // var arr=[]
    var arr=[]
    // res.data.main_products.split(","),
    arr=options.selectedCity.split(",")
    for(var i=0;i<arr.length;i++){
      arr[i]=arr[i]+"市"
    }
    
        this.setData({
          result:arr
        })
    }

  },

 
  onReady: function () {
    // 生命周期函数--监听页面初次渲染完成

  },
  onShow: function () {
    // 生命周期函数--监听页面显示

  },
  onHide: function () {
    // 生命周期函数--监听页面隐藏

  },
  onUnload: function () {
    // 生命周期函数--监听页面卸载

  },
  onPullDownRefresh: function () {
    // 页面相关事件处理函数--监听用户下拉动作

  },
  onReachBottom: function () {
    // 页面上拉触底事件的处理函数

  },
  
  onChange(e) {
    console.log(e)
    var that=this
    that.setData({
      // checked: e.detail,
      result: e.detail
    });
    console.log(that.data.result)

  },
  toggle(event) {
    const { index } = event.currentTarget.dataset;
    const checkbox = this.selectComponent(`.checkboxes-${index}`);
    checkbox.toggle();
  },

  noop() {},
  onUnload:function(){
    this.goback()
  },
 
  goback(){
    var pages = getCurrentPages();
    var prevPage = pages[pages.length - 2];  //上一个页面
 
    var results=this.data.result
    for(var i=0;i<results.length;i++){
       if(results[i].indexOf("市") != -1){
         results[i]=results[i].substring(0, results[i].length - 1)
       }
    }
  
    prevPage.setData({
      selectedCity:results
    })
    // wx.navigateBack(
    //   {delta: 1,}
    // );
  }
})

wcss页面

.value-class {
  flex: none !important;
}

调用页面wxml

<label bindtap="showSericePicker">
    {{serviceAddress}}
    <!-- 请选择 -->
 </label>

调用页面js

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log(this.data.selectedCity)

    if(this.data.selectedCity!=""){
      this.setData({
        serviceAddress:this.data.selectedCity
      })
    }
 
  },