思享工具箱

vue 实现分类渲染数据

摘要：
&lt；模板&gt；&lt；div class=“container”&gt；&lt；！--&lt；van粘滞&gt；--&gt；&lt；van tabs v-model=“tabActive”粘性滑动&gt；&lt；van tab v-for=“typeCV中的项目”：tit
<template>
  <div class="container">
    <!-- <van-sticky> -->
    <van-tabs v-model="tabActive" sticky swipeable>
      <van-tab
        v-for="item in typeCV"
        :title="item.listTitle"
        :key="item.titleId"
        @click="onItemClick(item.titleId)"
      >
        <van-list
          class="cVideo-content"
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          finished-text="没有更多了"
          @load="onLoad"
          :offset="10"
        >
          <ul class="card-view">
            <li
              class="col-xs-6 view-cell"
              v-for="(vItem, index) in courseVideoList"
              :key="index"
              v-show="vItem.id != null || undefined || '' || 0"
            >
              <nuxt-link
                :to="
                  `/res061401/ycc/shop/mobile/video?kind=2&videoId=${vItem.id}&path=${vItem.path}`
                "
              >
                <MyImg
                  :img-data="{
                    hash: vItem.cover,
                     '100%',
                    height: '100%',
                    defer: true,
                    adapt: false,
                    suffix: '',
                    alt: 'video Image'
                  }"
                  :warp-data="{
                     '98%',
                    height: '50%',
                    margin: '0 auto',
                    background: '#ccc'
                  }"
                />

                <p class="cVideo-name text-ellipsis">{{ vItem.name }}</p>
                <div class="cVideo-issuer-content pad-top-5">
                  <i
                    :class="
                      vItem.views > 0
                        ? 'iconfont icon-yulan text-red'
                        : 'iconfont icon-yulan'
                    "
                  ></i>
                  {{ vItem.views }}次浏览
                </div>
                <div class="cVideo-issuer-content pad-top-5 text-ellipsis">
                  <span>发布者:</span>
                  <span class="c-v-issuer">{{ vItem.issuer }}</span>
                </div>
              </nuxt-link>
            </li>
          </ul>
        </van-list>
      </van-tab>
    </van-tabs>
    <!-- </van-sticky> -->
  </div>
</template>

<script>
import qs from 'qs'
import MyImg from '~/components/MyImg'

export default {
  components: {
    MyImg
  },
  // asyncData({ query }) {
  //   return {
  //     page=query.page,
  //     size=query.size
  //   }
  // },

  data() {
    return {
      loading: false,
      finished: false,
      page: 1, //请求第几页
      size: 10, //每页请求的数量
      total: 0, //总共的数据条数
      courseVideoList: [
        {
          name: ''
        }
      ],
      tabActive: 0,
      clist: [],
      num: 0,
      typeCV: [],
      typeNum: '',
      vid: ''
    }
  },
  watch: {
    //监听点击了哪一个tab分类
    tabActive(index) {
      this.vid = this.typeCV[index].titleId
      //切换列表
      this.getCourseVideoList1(this.vid)

      // let vid = this.clist[index].id
      // let page = 1
      // let size = 10
      // this.getCategoryList(vid, page)
    }
  },
  beforeMount() {
    //获取分类标题
    this.getVideotypeList()
    //展示e课列表
    this.getCourseVideoList()

    // let vid = this.clist[0].id
    // this.clist.forEach(async (item, index) => {
    //   item.plist = await this.getCategoryList(item.id, 1)
    //   this.$forceUpdate()
    // })
  },
  methods: {
    onItemClick(titleId) {
      // console.log('*****测试这一步走不到*******' + titleId)
    },
    getVideotypeList() {
      this.$axios({
        url: '/video/query',
        method: 'post',
        headers: {
          'content-type': 'application/x-www-form-urlencoded',
          reqType: 'getVideotypeList'
        }
      }).then(({ data: resData }) => {
        if (resData.status == 1) {
          let arrCV = resData.data
          arrCV.forEach((item, index, array) => {
            this.typeCV.push(arrCV[index])
          })
        } else {
          this.$notify(`数据获取失败...`)
        }
      })
    },
    getCourseVideoList() {
      this.$axios({
        url: '/video/query',
        method: 'post',
        headers: {
          'content-type': 'application/x-www-form-urlencoded',
          reqType: 'getCourseList'
        },
        data: qs.stringify({
          page: this.page,
          size: this.size
        })
      }).then(({ data: resData }) => {
        if (resData.status == 1) {
          this.typeNum = resData.data.pages
          let rows = resData.data.list //请求返回当页的列表
          //定时器
          setTimeout(() => {
            //隐藏 加载时的提示
            this.loading = false

            this.total = resData.data.total
            // this.clist=resData.data.data

            if (rows == null || rows.length === 0) {
              // 加载结束
              this.finished = true
              return
            }

            // 将新数据与旧数据进行合并
            this.courseVideoList = this.courseVideoList.concat(rows)

            //如果列表数据条数>=总条数，不再触发滚动加载
            if (this.courseVideoList.length >= this.total) {
              this.finished = true
            }
          }, 800)
          // this.courseVideoList = resData.data.list
        } else {
          this.$notify(`数据获取失败...`)
        }
      })
    },
    //滚动加载时触发，list组件定义的方法
    onLoad() {
      this.page++
      this.getCourseVideoList()
    },

    //获取分类的list
    // async getCategoryList(vid, page) {
    //   let res = await this.$axios({
    //     url: `/video/query?vid=${vid}&page=${page}&size=10`,
    //     method: 'post',
    //     headers: {
    //       'content-type': 'application/x-www-form-urlencoded',
    //       reqType: 'xxxx'
    //     }
    //   })
    //   console.log(res)
    //   return res.data.data
    // }

    //点击tabTitle切换列表
    getCourseVideoList1(vid) {
      this.courseVideoList = ''
      this.$axios({
        url: '/video/query',
        method: 'post',
        headers: {
          'content-type': 'application/x-www-form-urlencoded',
          reqType: 'getCourseList'
        },
        data: qs.stringify({
          page: 1,
          size: this.size,
          videoType: this.vid
        })
      }).then(({ data: resData }) => {
        if (resData.status == 1) {
          this.typeNum = resData.data.pages
          let rows = resData.data.list //请求返回当页的列表
          // 将新数据与旧数据进行合并
          this.courseVideoList = this.courseVideoList.concat(rows)
          this.courseVideoList = rows
          //定时器
          setTimeout(() => {
            //隐藏 加载时的提示
            this.loading = false

            this.total = resData.data.total
            // this.clist=resData.data.data

            if (rows == null || rows.length === 0) {
              // 加载结束
              this.finished = true
              return
            }

            // 将新数据与旧数据进行合并
            this.courseVideoList = this.courseVideoList.concat(rows)

            //如果列表数据条数>=总条数，不再触发滚动加载
            if (this.courseVideoList.length >= this.total) {
              this.finished = true
            }
          }, 800)
          // this.courseVideoList = resData.data.list
        } else {
          this.$notify(`数据获取失败...`)
        }
      })
    }
  },
  head() {
    return {
      title: '经侦e课'
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .van-tabs__content {
  margin-top: 10px;
}
/deep/ .van-tab--active {
  color: #323233;
  font-weight: 600;
  font-size: 1rem;
}
/deep/ .van-tabs__line {
  position: absolute;
  bottom: 0.9375rem;
  left: 0;
  z-index: 1;
  height: 0.1875rem;
  background-color: #323233;
  border-radius: 0.1875rem;
}

/deep/ .van-tabs--line .van-tabs__wrap {
  height: 2.75rem;
  box-shadow: 0 2px 2px #ebe7e7;
}
/deep/ .van-tabs__nav--card {
  box-sizing: border-box;
  height: 1.875rem;
  margin: 0 1rem;
  border: 0.0625rem solid #fff;
  border-radius: 0.125rem;
}
/deep/ .van-hairline--top-bottom {
  box-shadow: 0 2px 2px #ebe7e7;
}
/deep/ .van-tabs__nav--card .van-tab {
  color: #929292 !important;
  line-height: 1.75rem;
  border-right: 0.0625rem solid #fff !important;
  border-radius: 5px;
  background-color: #ebebeb;
  margin-right: 5px;
}
/deep/ .van-tabs__nav--card .van-tab.van-tab--active {
  color: #067eee !important;
  background-color: #ebf0f4 !important;
  border-radius: 5px;
}
.col-xs-6 {
   47%;
}
.pad-top-5 {
  padding-top: 5px;
}
.view-cell {
  position: relative;
  float: left;
  height: 11rem;
  background: #fff;
  box-shadow: 3px 3px 10px #e0e0e0;
  margin-left: 2%;
  margin-bottom: 10px;
  border-radius: 5px;
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<style>
.cVideo-title {
  border-bottom: 1px solid #e8e6e6;
  padding: 10px;
  font-weight: bold;
}
.cVideo-content {
  margin-bottom: 15px;
}
.cVideo-views {
  display: inline;
  margin: 0 0 0 10px;
}
.cVideo-issuer-content {
  float: right;
  padding: 0 20px 0 0px;
}
.c-v-issuer {
  color: #1989fa;
}
.cVideo-name {
  padding: 5px 0 0 10px;
  color: #333333;
  font-weight: bold;
}
</style>

标签：#分类数据#vue | 浏览：245 | 发布日期：

免责声明：文章转载自《vue 实现分类渲染数据》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇程序员的鄙视链有多长？【转载】js原生封装自定义滚动条下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

vue前端使用axios传参注意事项

axios只支持键值对传参，如果只有一个数据也要封装为键值对，ids为后台接收的参数例如const data = { ids: JSON.stringify(parameter) } 1.如果后台接收的数据类型为数组类型，则，前台组装数据为1,2,2,4,3注意不要加()和[]，否则出错2.如果传递集合形式： ids=[1,18,19,20,21,22,2...

vue-cli3.0和element-ui及axios的安装使用

一、利用vue-cli3快速搭建vue项目 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 web...

vue项目中生产环境禁用debugger，关闭console

vue-cli2.0中的方法 1.安装uglifyjs-webpack-plugin插件 npm install uglifyjs-webpack-plugin --save-dev 2.修改wenbpack.prod.config.js配置文件 const UglifyJsPlugin = require('uglifyjs-webpack-plugi...

vue中添加文字或图片水印

首先引用warterMark.js，内容如下 'use strict' var watermark = (className,str,type) =>{ let dom =document.getElementsByClassName(className) let canvas = document.createElement('...

vue框架前后端分离项目之订单表、立即付款接口及前端、支付成功回调等相关内容-131

1 订单表设计 1 两张表 -一个订单可能包含多门课程 -订单表：订单号，订单生成时间，订单总价格。。。(订单跟订单详情是一对多的关系)    -订单详情表：order,course，该课程的价格。。。             from django.db import models​from user.models import Userfr...

富文本编辑器vue2-editor

富文本编辑器vue2-editor 在后台管理系统开发的过程中，富文本编辑器是经常会用到的一种文本编辑工具。目前主流的富文本编辑器有很多，但总有一款是符合自己需求的。在周末花费了大约半天的时间，尝试了许多富文本编辑器，大体上功能都相差无几。主要是对富文本中图片的处理，各个种类的富文本对图片的处理差异还是挺大的。此处的所说的图片处理指的是图片的大小调整、位置...

最新文章

随机推荐

思享工具箱导航