新增滚动定位

src/components/List/index.vue

@@ -1,151 +1,155 @@
<template>
    <div class="custom-list" :class="{'has-filter': filterList, 'has-search': searchfun}">
        <div class="search" v-if="searchfun">
            <slot v-if="$scopedSlots['search']" name="search"/>
            <form v-else action="/">
                <van-search
                    v-model="searchText"
                    :placeholder="searchPlaceholder"
                    show-action
                    @search="search"
                    @cancel="onCancel"
                />
            </form>
        </div>
        <div class="filter" v-if="filterList">
            <van-dropdown-menu
                active-color="#17b3ec">
                <van-dropdown-item 
                    @change="onChange($event, item.id)"
                    v-for="(item, i) in filterList" 
                    :key="i" 
                    v-model="item.value" 
                    :options="item.options" >
                    <template v-if="item.value==''" slot="title">{{item.title}}</template>
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>
        <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                :error.sync="isError"
                error-text="请求失败，点击重新加载"
                @load="onLoad"
                >
                <div class="custom-van-list">
                    <slot></slot>
                </div>
                <template v-if="!listLength && finished">
                    <div class="pt50" slot="finished">
                        <no-data text="暂无数据~~"></no-data>
                    </div>
                </template>
            </van-list>
        </van-pull-refresh>
  <div
    class="custom-list"
    @scroll.passive="getScroll($event)"
    style="overflow-y: scroll"
    ref="scrollPoll"
    :class="{ 'has-filter': filterList, 'has-search': searchfun }">
    <div class="search" v-if="searchfun">
      <slot v-if="$scopedSlots['search']" name="search" />
      <form v-else action="/">
        <van-search
          v-model="searchText"
          :placeholder="searchPlaceholder"
          show-action
          @search="search"
          @cancel="onCancel" />
      </form>
    </div>
    <div class="filter" v-if="filterList">
      <van-dropdown-menu active-color="#17b3ec">
        <van-dropdown-item
          @change="onChange($event, item.id)"
          v-for="(item, i) in filterList"
          :key="i"
          v-model="item.value"
          :options="item.options">
          <template v-if="item.value == ''" slot="title">{{ item.title }}</template>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="isError"
        error-text="请求失败，点击重新加载"
        @load="onLoad">
        <div class="custom-van-list">
          <slot></slot>
        </div>
        <template v-if="!listLength && finished">
          <div class="pt50" slot="finished">
            <no-data text="暂无数据~~"></no-data>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
export default {
    name: "CustomList",
    props: {
        "filterConfigs": Array,
        "searchPlaceholder": {
            type: String,
            default: "搜索"
        },
        "searchfun": {
            type: Boolean,
            default: true
        }
  name: 'CustomList',
  props: {
    'filterConfigs': Array,
    'searchPlaceholder': {
      type: String,
      default: '搜索'
    },
    components: {
        
    },
    data(){
        return {
            searchText: "",
            pullLoading: false,
            loading:false,
            finished: false,
            isError: false,
    'searchfun': {
      type: Boolean,
      default: true
    }
  },
  components: {},
  data() {
    return {
      searchText: '',
      pullLoading: false,
      loading: false,
      finished: false,
      isError: false,
            list: [],
            page: 1,
            pageSize: 12,
            filterList: "",
            listLength: 0
        }
      list: [],
      page: 1,
      pageSize: 12,
      filterList: '',
      listLength: 0,
      scrollToHeight: 0
    }
  },
  created() {},
  mounted() {},
  computed: {},
  watch: {
    searchText(n, o) {
      if (!n) {
        this.search()
      }
    },
    filterConfigs: {
      handler() {
        this.filterList = this.filterConfigs
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getScroll(event) {
      this.scrollToHeight = event.target.scrollTop
    },
    onscrollend() {
      setTimeout(() => {
        console.log(this.$refs)
        this.$refs.scrollPoll.scrollTop = this.scrollToHeight
      }, 200)
    },
    search() {
      this.onLoad(true, 'search')
    },
    created(){
        
    onLoad(reload, sourceType) {
      if (reload) {
        this.page = 1
      }
      this.loading = true
      this.$emit('onLoad', {
        page: this.page,
        pageSize: this.pageSize,
        searchText: this.searchText,
        sourceType
      })
    },
    mounted() {
        
    onRefresh() {
      this.onLoad(true, 'onRefresh')
    },
    computed:{
		
    onCancel() {
      this.searchText = ''
    },
    watch: {
        searchText(n, o){
            if(!n){
                this.search()
            }
        },
        filterConfigs:{
            handler(){
                this.filterList = this.filterConfigs
            },
            immediate: true,
            deep: true
        }
    endLoad(isFinish, isErr) {
      this.loading = false
      this.pullLoading = false
      this.finished = isFinish ? true : false
      if (typeof isErr == 'boolean') {
        this.isError = isErr
      } else {
        this.listLength = isErr
        this.isError = false
      }
      if (!this.isError) {
        this.page++
      }
    },
    methods: {
        search(){
            this.onLoad(true, 'search')
        },
        onLoad(reload, sourceType) {
            if(reload){
                this.page = 1
            }
            this.loading = true
            this.$emit('onLoad', { 
                page: this.page, 
                pageSize: this.pageSize, 
                searchText: this.searchText,
                sourceType
            })
        },
        onRefresh(){
            this.onLoad(true, 'onRefresh')
        },
        onCancel(){
            this.searchText = ""
        },
        endLoad(isFinish, isErr){
            this.loading = false
            this.pullLoading = false
            this.finished = isFinish? true : false
            if(typeof isErr == 'boolean'){
                this.isError = isErr
            } else{
                this.listLength = isErr
                this.isError = false
            } 
            if(!this.isError){
                this.page++
            }
        },
        onChange(value, id){
            this.$emit('onFilter', id, value)
        },
        refresh(reload){
            this.onLoad(reload)
        }
    onChange(value, id) {
      this.$emit('onFilter', id, value)
    },
};
    refresh(reload) {
      this.onLoad(reload)
    }
  }
}
</script>
<style lang="scss" scoped>
@import './css/index.scss';