2020年12月_guokanglun

原创微信小程序轮播图

文章目录1. 轮播图1. 轮播图 <!-- 原图的宽度和高度 1125 * 352 px swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度 swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度 height: 100vw * 352 / 1125 widthFix ：宽度指定了之后高度会自己按比例来调整 5 autoplay 自动轮播 6 interval

2020-12-30 14:08:21 413

原创微信小程序音频播放器

文章目录1. source code2. 效果图1. source code<view class='audioPalyWrap'> <view class='picWrap'> <view class='pic {{ !onoff ? "active":"" }}'> <image src='http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_a

2020-12-28 17:01:52 1213

原创微信小程序视频弹幕发送

文章目录1. 目录结构2. videoDanmu3. selectColor4. 效果图1. 目录结构2. videoDanmu<video src="{{src}}"id='video'danmu-btnenable-danmudanmu-list="{{ danmuList }}"></video><view class='sendDanmu'> &lt

2020-12-27 18:26:02 1429 4

原创微信小程序登录注册

文章目录1. source code1. source code<form bindsubmit="handleSubmit" wx:if="{{ onoff }}"> 用户名： <input type="text" name='username'/> 密码： <input type="password" name='password'/> 手机号： <input type="text" name='phone'/> <bu

2020-12-26 17:09:51 737

原创微信小程序下拉加载更多商品

文章目录1. source code2. 效果1. source code<view class='goods'> <view class='good' wx:for="{{ goodslist }}" wx:key='index'> <view class='pic'> <image src='{{ item.imgUrl }}'></image> </view> <view c

2020-12-26 16:07:44 492 2

原创微信小程序生命周期

文章目录1. 目录2. demo23. 效果显示1. 目录2. demo2<!-- <view class='newslist'> <view class="pic"> <image src="http://www.tanzhouweb.com/vueProject/image/newsList/1.jpg" alt="" width="100%" height="100%" data-src="http://www.ta

2020-12-24 22:19:58 214

原创微信小程序发表信息--页面通信

文章目录1. 文件目录2. demo页面3. edit 页面4. 效果1. 文件目录2. demo页面<view> <view wx:for="{{msg}}" wx:key='*this'> {{ item }} </view> <button type='primary' bindtap='handleTap'> 发表信息 </button></view>// pages/demo/demo.jsPage

2020-12-24 17:35:57 1507 1

原创微信小程序自定义组件tabs

文章目录1. news模板2. tabs 调用1. news模板news.wxml<template name='tpl'> <view class='news' wx:for="{{ msg }}" wx:key='id'> <view class='news-content'> <view class='content'> {{ item.title }} </view> <text class='time

2020-12-24 14:50:43 296

原创 vue 树状表格

文章目录1. 初始化配置2. 使用3. 效果1. 初始化配置安装模块：npm i vue-table-with-tree-grid -Smain.js 文件import ZkTable from 'vue-table-with-tree-grid'Vue.component(ZkTable.name, ZkTable);2. 使用<template lang="html"> <div id="example"> <zk-table

2020-12-18 12:53:42 2170 3

原创路由守卫

路由文件设置// 路由导航守卫/* to: 到某个地址 from: 从哪个地址来 next：是否放行 */router.beforeEach((to, from, next)=>{ // 访问登页直接放行,其他页面判断是否有登录凭证，如果没有直接跳转到登录页 if(to.path==='/login') return next(); const tokenStr = window.sessionStorage.getItem('token');

2020-12-15 13:01:12 197

原创 route router

文章目录1、$route对象2、$router对象1、$route对象$route对象表示当前的路由信息，包含当前的路径，参数，query对象等。1. $route.path 当前路由的路径2. $route.params 动态参数3. $route.query 查询字符串2、$router对象$router是router构造方法的实例。push1.字符串this.$router.push(’/home’)向 history 栈添加一个新

2020-12-14 16:15:21 100

原创 vue案例-购物车进阶版（组件化，vuex，mock数据）

文章目录1. 目录结构2. mock 数据3. vuex 状态管理4. 组件使用1. 目录结构2. mock 数据mock数据只能通过ajax请求获取，从而达到模拟后台接口的作用定义数据 data.json[ { "id": 1, "name": "TCL彩电", "price": 1000, "num": 1 }, { "id": 2, "name": "机顶盒", "price": 1000, "num": 1

2020-12-14 14:24:54 693 2

原创 vue案例--购物车（组件化，父子组件传值）

文章目录1. 父组件2. 子组件1. 父组件<template> <div id="app"> <div class="container"> <div class="cart"> <Header></Header>  <List :list="list" @del="del($event

2020-12-14 11:38:51 999

原创 vue 动画

文章目录1. 过渡动画1. 过渡动画v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。v-leav

2020-12-11 23:10:50 94

gklcsdn的博客