vant vue 碎片一

https://www.jianshu.com/p/53deecb09077

https://blog.csdn.net/AinUser/article/details/78428482

https://juejin.im/post/5da5c1cf6fb9a04e1b57f2cc

https://blog.csdn.net/qq_35192741/article/details/80655464

<template>
    <div class="wrapper">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :offset="offset"
          class="content"
        >
            <van-cell
                v-for="(item,index) in saleDataList"
                :key="index"
                class="list-item"
                :title="none"
            >
                {{item.circ_fr_api.circ_fr_content[0]}}
            </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
</template>

<div>
        <van-grid :border="false" :column-num="3">
    <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
    </van-grid-item>
    <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
    </van-grid-item>
    <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
    </van-grid-item>
    </van-grid>
</div>

<script>
import axios from 'axios'
import Vue from 'vue'
import { PullRefresh, Toast, List, Cell , Grid , GridItem , Image } from 'vant'
Vue.use(PullRefresh).use(Toast).use(List).use(Cell).use(Grid).use(GridItem).use(Image)
export default {
  data () {
    return {
      saleDataList: [],
      list: [],
      isLoading: false,
      loading: false,
      finished: false,
      offset: 15,
      page: 1,
    }
  },
  methods: {
    /**
    *  下拉刷新方法
     */
    onRefresh () {
      // 调用请求数据方法
      this.getList()
    },
    /**
    *  上拉加载方法
    *  页面打开时初始化会调用onLoad方法 如果想去掉初始化调用使用,给List添加属性immediate-check=false
     */
    onLoad () {
      // 调用请求数据方法
      this.getList()
    },
    /**
    *  请求数据方法
     */
    getList () {
        axios.get('https://jianxun.jp/wp-json/wp/v2/circle_list/', {
            params: {
                page: this.page,
                per_page: 7,
            },
        }).then((res) => {

            console.log(res.data)
            this.listCount = res.headers['x-wp-total']
            this.list = res.data
            this.saleDataList = this.saleDataList.concat(this.list)


            // 加载状态结束
            this.loading = false
            this.isLoading = false
            // 数据全部加载完成
            if (this.saleDataList.length >= this.listCount) {
                this.finished = true
            } else {
                this.page++
            }

        }).catch(function (error) {
            console.log(error)
        })
    }
  }
}
</script>

<style scoped lang="scss">
  .tabs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #7e8c8d;
  }
  .wrapper {
    margin-top: 20px;
    .content{
      .text{
        font-size: 14px;
        color: rgba(69,90,100,.6);
      }
      .list-item {
        padding: 30px;
        text-align: center;
        background: #0088cc;
        border-bottom: 1px solid red;
      }
    }
  }
</style>