MOOC video learning tab component


tab.vue

app.vue

Detailed process reference:
https://www.cnblogs.com/zhaobao1830/p/9978505.html

Explain the remaining problems first

The problem is that there is more data in components

The project uses the cube UI library. If you want to change the default color, you can do this

When we install cube UI, a file will appear: theme.styl, which can be modified here

In the project, we create a new common/stylus/variable.styl file, in which we define the color first

Then, introduce the file in theme.styl and replace the defined color


4-2 tab component up and down linkage

By using cube tab and cube slide, when scrolling the slide, the corresponding tab underline also scrolls

Source code:
app.vue

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <div class="tab-wrapper">
      <tab></tab>
    </div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Tab from './components/tab/tab.vue'
export default {
  name: 'app',
  components: {
    HelloWorld,
    Tab
  }
}
</script>
<style lang="stylus">
#app{
  position fixed
  top 0
  bottom 0
  left 0
  right 0
}
</style>

tab.vue

<template>
  <div class="tab">
    <cube-tab-bar
      :useTransition=false
      :showSlider="true"
      v-model="selectedLabel"
      :data="tabs"
      ref="tabBar"
      class="border-bottom-1px"
    ></cube-tab-bar>
    <div class="slide-wrapper">
      <cube-slide
        :loop="false"
        :auto-play="false"
        :show-dots="false"
        :initial-index="index"
        ref="slide"
        @change="onChange"
        @scroll="onScroll"
        :options="slideOptions"
      >
        <cube-slide-item>
          <goods></goods>
        </cube-slide-item>
        <cube-slide-item>
          <ratings></ratings>
        </cube-slide-item>
        <cube-slide-item>
          <seller></seller>
        </cube-slide-item>
      </cube-slide>
    </div>
  </div>
</template>
<script>
import goods from '../goods/goods.vue'
import ratings from '../ratings/ratings'
import seller from '../seller/seller'
export default {
  name: 'tab',
  data () {
    return {
      index: 0,
      tabs: [
        {
          label: 'commodity'
        },
        {
          label: 'evaluate'
        },
        {
          label: 'business'
        }
      ],
      slideOptions: {
        listenScroll: true, // Whether to monitor scroll events
        probeType: 3, // 0 does not distribute scroll events, 1: non real time; 2: in the process of sliding; 3: not only in the process of screen sliding, but also in the running process of momentum rolling animation
        dirctionLockThreshold: 0
      }
    }
  },
  methods: {
    // Triggered during page switching
    onChange (current) {
      this.index = current
    },
    onScroll (pos) {
      // console.log(pos.x)
      const tabBarWidth = this.$refs.tabBar.$el.clientWidth
      const slideWidth = this.$refs.slide.slide.scrollerWidth
      const transform = -pos.x / slideWidth * tabBarWidth
      this.$refs.tabBar.setSliderTransform(transform)
    }
  },
  computed: {
    selectedLabel: {
      get () {
        return this.tabs[this.index].label
      },
      set (newVal) {
        // Click the menu to switch to calculate the current index,
        this.index = this.tabs.findIndex(value => {
          return value.label === newVal
        })
      }
    }
  },
  components: { seller, ratings, goods }
}
</script>
<style lang="stylus" scoped>
  // @import "~cube-ui/lib/tab-bar/style.css"
  .tab
    >>> .cube-tab
      padding 10px 0
      // display flex
      flex-dirction column
      height 100%
      .slider-wrapper
        flex 1
        overflow hidden
</style>

Considering that it is not convenient to add a list to a tab page, the tab is abstracted as a component and passed in from the parent component

app.vue

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    
    <div class="tab-wrapper">
      <tab :tabs="tabs"></tab>
    </div>
  </div>
</template>

<script>

import Tab from './components/tab/tab'
import Goods from './components/goods/goods'
import Ratings from './components/ratings/ratings'
import Seller from './components/seller/seller'
import { getSeller } from 'api'

export default {
  name: 'app',
  data () {
    return {
      seller:{}
    }
  },
  computed: {
    tabs () {
      return [
        {
          label: 'commodity',
          component: Goods,
          data: {
            seller: this.seller
          }
        },
        {
          label: 'comment',
          component: Ratings,
          data: {
            seller: this.seller
          }
        },
        {
          label: 'business',
          component: Seller,
          data: {
            seller: this.seller
          }
        }
      ]
    }
  },
  components: { Tab, Seller, Ratings, Goods }
}
</script>
<style lang="stylus">
#app {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>

How does seller get here? api file



index.styl

@import './icon'
@import './base'

icon.styl
empty
base.styl

html,body{
    height 100%
    overflow hidden
}

maxin.styl

@import '~cube-ui/src/common/stylus/mixin.styl'

api/helpers.js

import axios from 'axios'

const ERR__OK = 0

export function get(url) {
  return function (params) {
    return axios.get(url, {
      params
    }).then((res) => {
        const { errno, data } = res.data
        if (errno === ERR__OK) {
            return data
        }
    }).catch(() => {
    })
  }
}

api/index.js

import { get } from './helpers'

const getSeller = get('/api/seller')

export {
    getSeller
}

npm WARN checkPermissions Missing write access to D:\react-native-workspace\react-native\react-native-cli\node_modules\axios
Solution

Delete C: \ users \ DD \ appdata \ roaming \ NPM cache\
C:\Users\dd\AppData\Roaming\npm \ execute npm install -g again in two folders

Data acquisition, encapsulation of axios

app.vue

import { getSeller } from 'api'

vue.config.js

const path = require('path')
const appData = require('./data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings

function resolve(dir) {
  // dir, address of the current file
  return path.join(__dirname, dir)
}
module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        'resolve url': true,
        'import': [
          './src/theme'
        ]
      }
    }
  },
  pluginOptions: {
    'cube-ui': {
      postCompile: true,
      theme: true
    }
  },
  devServer: {
    before(app) {
      app.get('/api/seller', function (req, res) {
        res.json({
          errno: 0,
          data: seller
        })
      })
      app.get('/api/goods', function (req, res) {
        res.json({
          errno: 0,
          data: goods
        })
      })
      app.get('/api/ratings', function (req, res) {
        res.json({
          errno: 0,
          data: ratings
        })
      })
    }
  },
  chainWebpack(config) {
    config.resolve.alias
      .set('components', resolve('src/components'))
      .set('common', resolve('src/common'))
      .set('api', resolve('src/api'))
  }
}

Tags: Vue axios npm JSON

Posted on Sun, 01 Dec 2019 02:51:39 -0800 by ekitel