随笔分类 -  VUE

项目实战
swiper.js Bscroll 轮播
摘要：<!-- 轮播banner图 --> <div class="banner"> <div class="swiper-container" id="swiper-banner"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for 阅读全文
posted @ 2021-02-02 09:50 糖锡 阅读(129) 评论(0) 推荐(0)
vuex
摘要：store.dispatch 可以处理被触发的action的处理函数返回的promise, return Promise.resolve(xxx) 并且 store.dispatch 中的方法返回的是一个Promise对象 this.$store.dispatch('').then(res => { 阅读全文
posted @ 2020-12-17 14:39 糖锡 阅读(88) 评论(0) 推荐(0)
基于swiper.js的异型轮播
摘要：基于原生swiper.js的异型轮播 <div class="swiper-container" > <div class="swiper-wrapper"> <div v-for="(item, index) in currentSwipeInfo.fuCardList" :key="index" 阅读全文
posted @ 2020-12-11 11:32 糖锡 阅读(1669) 评论(0) 推荐(0)
判断页面是否有滚动条
摘要：scrollTop + clientHeight >= scrollHeight // 滚动到当前元素所在的位置 this.$refs.el.scrollIntoView() 阅读全文
posted @ 2020-12-11 10:25 糖锡 阅读(731) 评论(0) 推荐(0)
H5 visibilityChange事件 --- 监听页面的显示或者隐藏 新开一个webview
摘要：mounted() { document.addEventListener('visibilityChange', 事件处理函数) }, destoryed() { document.removeEventListener('visibilityChange', 事件处理函数) }, methods 阅读全文
posted @ 2020-12-10 17:30 糖锡 阅读(1394) 评论(0) 推荐(1)
vuex记录状态
摘要：// actions import { queryProductDetailsById } from '../service' /* * 异步 */ export const addAndGetProduct = ({ commit, state, getters }, params) => { c 阅读全文
posted @ 2020-12-09 14:42 糖锡 阅读(94) 评论(0) 推荐(0)
vue双向监听proxy
摘要：console.log('判断页面是否有滚动条', this.hasScrollbar) const that = this that.count = 0 // 计数 that.scrollProxy = new Proxy({ hasScrollToEnd: !that.hasScrollbar, 阅读全文
posted @ 2020-12-01 15:13 糖锡 阅读(149) 评论(0) 推荐(0)
H5-生成二维码
摘要：<div class="poster-qr"> <div class="qrWrapper"> <!-- 放置二维码的容器 --> <div id="qrcode" ref="qrcode" class="qrcode"/> </div> <div class="qrDesc">长按扫描二维码领取< 阅读全文
posted @ 2020-11-20 09:27 糖锡 阅读(440) 评论(0) 推荐(0)
切换选中与不选中
该文被密码保护。
posted @ 2020-09-11 09:40 糖锡 阅读(0) 评论(0) 推荐(0)
声明式导航和编程式导航
摘要：// 字符串 <router-link to="apple"> to apple</router-link> // 对象 <router-link :to="{path:'apple'}"> to apple</router-link> // 命名路由 <router-link :to="{name 阅读全文
posted @ 2020-06-05 16:22 糖锡 阅读(578) 评论(0) 推荐(0)
全局组件和局部组件
摘要：// 全局组件和局部组件 Vue.component('组件名',配置对象) Vue.component('global', { template: ` <div> <h1>全局组件<h1> // 局部组件 <gl-demo></gl-demo> </div> `, data() { return 阅读全文
posted @ 2020-06-03 23:52 糖锡
全局过滤器和局部过滤器
只有注册用户登录后才能阅读该文。
posted @ 2020-06-03 23:27 糖锡
数组的嵌套排序
摘要：// 常规的数组排序的方法 a-b升序 b-a降序 arr.sort(function(a,b) { return a - b }) // sort内部是有嵌套排序机制的 两级排序 this.productSourceList = productSourceList.sort(this.sortBy 阅读全文
posted @ 2020-06-03 17:59 糖锡 阅读(682) 评论(0) 推荐(0)
移动端pdf预览---vue-pdf
摘要：<template> <div class="mainBody"> <!-- <div v-if="isLoading" class="loading">loading</div> --> <div v-if="isLoading" class="mask"> <loading size="24px 阅读全文
posted @ 2020-05-31 17:15 糖锡 阅读(1197) 评论(0) 推荐(0)
better-scroll横向滚动、纵向滚动
摘要：<div ref="tab" class="tab"> <ul ref="tabWrapper" class="tab_content"> <li v-for="item in prodfoldPostList" ref="tabitem" :key="item.id" class="tab_ite 阅读全文
posted @ 2020-05-31 09:49 糖锡 阅读(1485) 评论(0) 推荐(0)