前端模板案例

列表绑定

    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <!--  @refresh="onPullToBottomRefresh" -->
      <van-empty v-if="used.data.length === 0" :image="searchImg" :description="descriptionEmpty" ></van-empty>
      <van-list
        v-else
        v-model="pullToBottom.loading"
        :finished="pullToBottom.finished"
        :finished-text="pullToBottom.finishedText"
        :error.sync="pullToBottom.error"
        :error-text="pullToBottom.errotText"
        @load="onPullToBottomLoad"
      >
        <!-- :num="num" -->
        <van-card
          v-for="(item, i) in used.data"
          :key="i"
          :id="`${scrollId}scroll${i}`"
          :price="item.price"
          :desc="`${item.bdBbr}`"
          :title="${item.bdTbr}`"
          :thumb="item.icLogo || $appConfig.empty.noimgdata"
        >
         //其它内容
        </van-card>
      </van-list>
    </van-pull-refresh>

      doctor: {
        data: [],
        value: null,
        name: null,
        loading: false,
        firstLoad:false,
        descriptionEmpty: "数据加载中"
      },

method

 onPullToBottomLoad() {
      // debugger;
      let that = this;
      if (that.filter.pageIndex < that.used.paging.totalPage) {
        that.onPullToBottomRefresh();
      } else {
        that.loading = false;
      }
    },
    onPullToBottomRefresh() {
      let that = this;
      // 清空列表数据
      that.pullToBottom.finished = false;
      that.pullToBottom.loading = true;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      if (that.filter.pageIndex < that.used.paging.totalPage) {
        that.filter.pageIndex = that.filter.pageIndex + 1;
        method.loadDataComm(that);
      } else {
        that.pullToBottom.finished = true;
        that.pullToBottom.loading = false;
        that.loading = false;
      }
    },
    onRefresh() {
      let that = this;
      // if (that.firsted === true) {
      that.filter.pageIndex = 1;
      that.used.data = [];
      that.used.paging = {};
      method.loadDataComm(that);
      // }
    },
    handleSearchRemote(v) {
      this.filter.remoteName = v;
      this.$emit("on-remote-search", this.filter.remoteName);
    },

滚动条和功能信息

  created() {
    this.images.out = "../images/pt/icon-out.png";
    //app.auth.js
    this.navs = this.$appAuth.users.nav
      .filter((temp) => temp.enabled !== false)
      .sort(function (a, b) {
        return a.sortId - b.sortId;
      });
    //用于开发的栏目
    this.devs = (this.$appAuth.users.dev || [])
      .filter((temp) => temp.enabled !== false)
      .sort(function (a, b) {
        return a.sortId - b.sortId;
      });

    this.config.back = this.$appAuth.users.back;
  },



import method from "./method";

   created() {
    //===========公共部分  start
    this.scrollId = this.$crypto.md5(this.$route.fullPath);
    method.init(this);
    //===========公共部分 end
    let that = this;
    //加载功能信息 start
    that.$bsAjax
      .getUserFunction({
        menuId: that.filter._menuId,
      })
      .then((res) => {
        that.userActions = (((res || {}).data || {}).data || {}).actions || [];
      });
    //加载功能信息 end
  },