uniapp滚动到顶部及三级联动省市县通用组件

uniapp 滚动到顶部

uni.createSelectorQuery().select('.' + class).boundingClientRect(data=>{//目标节点
　　uni.createSelectorQuery().select('.' + class).boundingClientRect((res)=>{//最外层盒子节点 　　　　
　　　　uni.pageScrollTo({ 　　　　　　
　　　　　　duration: 0,//过渡时间必须为0，否则运行到手机会报错
　　　　　　scrollTop: 位置 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离（如res.top -data.top）
　　　　})
　　}).exec()
}).exec()

uniapp 三级联动省市县通用组件

1. 使用接口的的数据结构

 [
	{name:'北京'，id：11}
 ]    

2. 在页面中使用

//html
 <selectTree :selectId="form.birthplaceAncestorsTemp"
             @getTreeName="getTreeName"
             style="width:100%"
             :disabled="isEditOrDetail"
             :placeholder="isEditOrDetail?'':'请选择籍贯'"></selectTree>
 //methods
 getTreeName (obj) {
   this.form.birthplaceAncestors = obj.value
}

3. 完整组件

<template>
  <view class="houseInfo">
    <u-input @click="inputClick"
             v-model="birthplaceAncestorsName"
             :type="disabled?'text':'select'"
             style="width:100%"
             :disabled="disabled"
             :select-open="showselect"
             :placeholder="placeholder" />
    <u-picker v-model="showselect"
              mode="multiSelector"
              ref="multiSelector"
              style="width:100%"
              :range="getRange"
              :defaultSelector="defaultSelector"
              :key="rangeKey"
              @columnchange="columnchange"
              @confirm="confirm6"></u-picker>
  </view>
</template>

<script>
import { getBirthAddress } from '@api/index.js'
export default {
  props: {
    placeholder: {
      type: String,
      default: '请选择户籍地'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    selectId: {
      type: String,
      default: "[]"
    },
  },
  computed: {
    getRange: {
      get () {
        return this.range;
      },
    }
  },
  watch: {
    selectId:{
      handler(nv,ov){
        if(nv){
          let temp = JSON.parse(nv)
          this.currentId = temp
        }
        this.getData({ pid: 0 })
      },
      immediate:true
    }
  },
  data () {
    return {
      showselect: false,
      range: [],
      rangeKey: 0,
      birthplaceAncestorsName: '',
      defaultSelector: [],
      // 省
      provinceList: [],
      // 市
      cityList: [],
      // 县
      countyList: [],
      currentId:[]
    }
  },
  methods: {
    cancelSelected(){
      // this.defaultSelector = []
      // this.birthplaceAncestorsName = ""
    },
    inputClick () {
      if (this.disabled) return
      this.showselect = true
      if(this.isEmpty(this.defaultSelector)){
        this.defaultSelector = [0,0,0]
      }
      this.getData({ pid: 0 })
    },
    isEmpty (obj) {
      if (obj === 0) return true;
      if (Array.isArray(obj)) return !(obj.length > 0);
      return (obj === null || obj === undefined || obj === '' || obj === NaN);
    },
    getData (obj) {
      getBirthAddress(obj).then(res => {
        this.provinceList = res.data;
        if (this.currentId) {
          this.provinceList.some((d, index) => {
            if (d.id == this.currentId[0]) {
              this.defaultSelector[0] = index
            }
          })
        }
        let temp = res.data.map(tel => tel.name)
        this.$set(this.range, '0', temp)
        this.$forceUpdate()
        getBirthAddress({ pid: this.isEmpty(this.currentId) ? this.provinceList[0].id : this.currentId[0] }).then(del => {
          this.cityList = del.data;
          if (this.currentId) {
            this.cityList.some((d, index) => {
              if (d.id == this.currentId[1]) {
                this.defaultSelector[1] = index
              }
            })
          }
          let temp = del.data.map(tel => tel.name)
          this.$set(this.range, '1', temp)
          getBirthAddress({ pid: this.isEmpty(this.currentId) ? this.cityList[0].id : this.currentId[1] }).then(top => {
            this.countyList = top.data;
            if (this.currentId) {
              this.countyList.some((d, index) => {
                if (d.id == this.currentId[2]) {
                  this.defaultSelector[2] = index
                }
              })
              this.confirm6(this.defaultSelector)
            } else {
              this.confirm6(this.defaultSelector)
            }
            let temp = top.data.map(tel => tel.name)
            this.$set(this.range, '2', temp)
          })
        })
      })
    },
    columnchange (e) {
      let column = e.column, index = e.index;
      this.defaultSelector[column] = index;
      switch (column) {
        case 0: //拖动第1列
          getBirthAddress({ pid: this.provinceList[index].id }).then(res => {
            this.cityList = res.data;
            let temp = res.data.map(tel => tel.name)
            this.$set(this.range, '1', temp)
            console.log(this.cityList[0].name)
            getBirthAddress({ pid: this.cityList[0].id }).then(res => {
              this.countyList = res.data;
              let temp = res.data.map(tel => tel.name)
              this.$set(this.range, '2', temp)
            })
          })
          break
        case 1: //拖动第2列
          getBirthAddress({ pid: this.cityList[index].id }).then(res => {
            this.countyList = res.data;
            let temp = res.data.map(tel => tel.name)
            this.$set(this.range, '2', temp)
          })
          break
        case 2: //拖动第3列
          this.$forceUpdate()
          break
      }
    },
    // 户籍地选择事件
    confirm6 (e) {
      let isEmptyFlag = 0
      e.some(d=>{
        isEmptyFlag += 1
      })
      if (!this.isEmpty(e)&&!this.isEmpty(this.countyList)&&isEmptyFlag==3) {
        this.birthplaceAncestors = [Number(this.provinceList[e[0]].id), Number(this.cityList[e[1]].id), Number(this.countyList[e[2]].id)].join()
        this.birthplaceAncestorsName = this.provinceList[e[0]].name + '/' + this.cityList[e[1]].name + '/' + this.countyList[e[2]].name
      } else {
        this.birthplaceAncestors = ''
        this.birthplaceAncestorsName = ''
      }
      this.$emit('getTreeName', { value: this.birthplaceAncestors, name: this.birthplaceAncestorsName })
    }
  }
}
</script>

<style lang="scss">
</style>