慕课从零开发电商总结

秒速五厘米 2021-09-02 05:49 249阅读 0赞

1： vuex的基本使用  
基本使用

state:{
    count： 0
    }

mutions:{
    getCount (state, count) {
    state.count = count
    }
    }

调用

this.$store.commit('getCount', 1)

使用

this.$store.state.count

`辅助性函数的使用`

mapState  mapAction
    import { mapState, mapMutations } from 'vuex'

computed: mapState(['count'])
    相当于： 
    computed: {
    count () {
    return this.$store.state.count
    }
    }

methods:{
     ...mapMutations({
          getCountFunc: 'getCount'
        }),
        this.getCountFunc(1)
        }
        相当于
        this.$store.commit('getCount', 1)

2: 鼠标移入动画

// 公共logo
    .header-logo{
      display:inline-block;
      width:55px;
      height:55px;
      background-color:#FF6600;
      a{
        display:inline-block;
        width:110px;
        height:55px;
        &:before{
          content:' ';
          @include bgImg(55px,55px,'/imgs/mi-logo.png',55px);
          transition:margin .2s;
        }
        &:after{
          content:' ';
          @include bgImg(55px,55px,'/imgs/mi-home.png',55px);
        }
        &:hover:before{
          margin-left:-55px;
          transition:margin .2s;
        }
      }

4：混入 mixin.scss

//flex布局复用
    @mixin flex($hov:space-between,$col:center){
      display:flex;
      justify-content:$hov;
      align-items:$col;
    }

引入

@import './../assets/scss/mixin.scss';

使用

@include flex();

5: 鼠标移入 影藏 淡出

&:hover{
                  color:$colorA;
                  .children{
                    height:220px;
                    opacity:1;
                  }
                }

.children{
                  position:absolute;
                  top:112px;
                  left:0;
                  width:1226px;
                  height:0;
                  opacity:0;
                  overflow:hidden;
                  border-top:1px solid #E5E5E5;
                  box-shadow:0px 7px 6px 0px rgba(0, 0, 0, 0.11);
                  z-index: 10;
                  transition:all .5s;
                  background-color: #ffffff;
                  }
                  .container{
      position: relative;
      width:1226px;
      margin-right:auto;
      margin-left:auto;
    }

6：数据截取

if (res.list.length > = 6) {
    this.list = res.list.slice(0, 6)
    }

7：轮播  
8: 铺满

position: absolute
    left: 0
    top:0
    width:100%
    height: 100%

transition:transform .3s
    &:hover {
    transform:scle(1.5)
    }
    object-fit: cover
    
    
    .slide {
      position: fixed;
      top: -50%;
      opacity: 0;
      transition: top 0.6s, opacity 0.3s;
      .slideClick {
        top: 50%;
        opacity: 1;
      }
    
    @keyframes down {
      from{
        top: -50%;
        opacity: 0;
      } 
      to {
        top: 50%;
        opacity: 1;
      }
    }
    .slide {
      position: fixed;
      top: -50%;
      opacity: 0;
      // transition: top 0.6s, opacity 0.3s;
      animation: down .3s linear ;
      top: 50%;
    
    this.slide = down
    this.slide = ''

9: 不传参 传事件

@click="$emit('submit')"
    @submit=""

10: 路由跳转

this.$router.push('/a/a')
    this.$route.params.id

11: 图片赖加载  
`vue-lazyload`  
12: get post

get
     params:{
    }
    
    post: {
    
    }

13: 对于参数的结构

let {user, password}  =this

14: 对axios的状态,做路由跳转

window.location.href = '/'

15:安全区域

position: relative;
        width: 1226px;
        margin-right: auto;
        margin-left: auto;

16：吸顶

mounted() {
        window.addEventListener("scroll", this.initHeight);
      },
      methods: {
        initHeight() {
          let scrollTop =
            window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop;
          this.isFixed = scrollTop > 152 ? true : false;
        },
      },
      destroyed() {
        window.removeEventListener('scroll', this.initHeight, false) // 冒泡
      },

<nav-footer :class="{ 'is-fixed': isFixed }"></nav-footer>
      
        .is-fixed {
      position: fixed;  // 浏览器窗口
      top: 0;
      width: 100%;
    }

17:变量初始化辅助  
`const { data=2 } =`  
18: tab切换

<nav-footer :class="{'check': version === 1}" @click="version = 1"></nav-footer>
        <nav-footer :class="{'check': version === 2}" @click="version = 2"></nav-footer>

19：插槽

20： 滚到到底部分页

vue-infinite-scroll

21: loading 和暂无数据  
不需要if else 直接就是if判断nodata，因为nodata是最后一步没办法才要显示

数据加载的时候，要出现loading.数据加载完毕，但是没有数据，出现无数据页面

noData初始化为true.
    无数据页面判断条件为 v-if="!noData && list.length === 0"

请求回数据以后

if (!this.list) {
     this.noData = false
    }

22: 对参数的结构

先来看看我写的

wx.getSystemInfo({
          success: (res) => {
            console.log(res); // 根据 屏幕高度 进行判断
            if (res.screenHeight - res.safeArea.height > 40) {
              console.log("是全面屏");
              this.globalData.isFullSucreen = true;
              console.log(this.globalData.isFullSucreen);
            }
          },
        });

看看别人写的

const { safeArea, screenHeight } = wx.getSystemInfoSync()
          this.fullScreen = screenHeight - safeArea.height > 40

简明扼要之处，

1.  通过结构赋值，将需要的参数结构出来
2.  没有直接赋值true 或者false, 而是通过 一个表达式计算的结果。来判断是true or false  
    22 : 百名单设置

const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist