- 博客(33)
- 收藏
- 关注
RSS订阅原创 导航栏切换
<view class="orderNav"> <view class="inv-h-w"> <view :class="['inv-h',Inv==index?'inv-h-se':'']" @click="changeTab(index)" v-for="(item,index) in navList" :key="item.id">{{item.title}} </view> </view>...
2020-06-03 16:54:37
253
原创 实现60秒倒计时（刷新不重新计数）
完整代码：<template> <div ia="box"> <p class="time">{{time}}</p> </div></template><script> export default{ data() { return { time: '', ...
2020-04-29 12:03:44
985
1
原创 翻页缓存数据（keep-alive）
app.vue<template> <div id="app"> <!-- <router-view/> --> <keep-alive> <router-view v-if='$route.meta.keepAlive'/> </keep-alive> ...
2020-04-29 11:59:15
411
原创 改变checkbox默认样式
.html<div class='checkbox option'> <input type='checkbox' id='checkbox1' name='checkboox[]' value="a" v-model="checkedNames"> <label for='checkbox1'><span class="con...
2020-04-29 11:28:12
164
原创 改变radio默认样式
.vue<div class="choose"> <p class="option"><label class="radio"><span class="con">A 蛇</span><input type="radio" name="radio" value="1" v-model="picked"><i>...
2020-04-29 11:22:43
554
原创 表单组件slider、switch
slider（滑动选择器）注意：activeColor默认值在不同平台不一样，微信是绿色(#1aad19)，头条是红色，其他平台是蓝色template里：<template> <view> <view class="uni-padding-wrap uni-common-mt"> <view cl...
2020-03-31 12:51:33
396
原创 表单组件
button按钮size有效值default 默认大小mini 小尺寸type有效值primary 微信小程序为绿色，App、H5、百度小程序、支付宝小程序为蓝色，字节跳动小程序为红色，QQ小程序为浅蓝色default 白色warn 红色form-type 有效值submit 提交表单reset 重置表单效果示例<button type=...
2020-03-30 12:16:18
352
原创 uni-app引入UI组件库(Vant-weapp)步骤
1. 创建目录在项目根目录中创建wxcomponents目录在wxcomponents目录中创建vant目录2.引入vant-weapp组件在vant-weapp的GitHub Releases版块下载最新的zip包：https://github.com/youzan/vant-weapp/releases下载完成效果如下：将组件中的dist目录拷贝到创建好的va...
2020-03-27 15:41:13
7804
2
原创 跨域问题及项目总结
什么是跨域跨域指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。同源策略同源策略它是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果缺少 同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器都会使用这个策略。同源指：协议、域名、端口号都相同，只要有...
2020-03-25 16:03:07
132
原创 vuex的使用
vuex概念Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式状态管理模式new Vue({ // state state，驱动应用的数据源； data () { return { count: 0 } }, // view view，以声明方式将 state 映射到视图； template: ...
2020-03-23 20:55:20
266
原创 uniapp打包运行/媒体组件
H5打包发行——网站-H5手机版打包为原生app（云端）发行——原生app云打包—— Android选项打钩——使用DCloud公用证书——输入包名 ——去除广告选项 —— 打包出现界面，点击打包即可打包为原生app（离线）发布为微信小程序发行——小程序-微信——填入微信小程序名称和AppId即可在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后...
2020-03-13 16:49:12
360
原创 uniapp父子组件传值
在父组件中引入子组件父传子（props）在子类props里定义接收参数在子类标签写上引用然后在父类写上准备传递的参数此时，父组件传到子组件的值，就会覆盖默认背景色子传父（$emit）需要首先在子类组件定义事件在子类写上触发事件在父类引用标签上写上在子类$emit里面定义的方法名,以及接收方法然后点击子类触发,就可以传值给父类注意：1.父传子用props；...
2020-03-12 13:39:40
8984
1
原创 uniapp基本语法/组件使用
条件渲染v-if 指令用于条件性地渲染一块内容<template> <view> <view v-if="now">现在你可以看见我了！</view> </view></template><script> export default { data() { return { ...
2020-03-11 16:18:05
1908
原创 uniapp网络请求/轮播图/scroll-view
1.swiper轮播图indicator-dots :是否显示面板指示点autoplay :是否自动切换interval :自动切换时间间隔<template> <view> <swiper indicator-dots="true" autoplay="true" interval="2000"> <swiper-item&...
2020-03-10 17:40:17
2250
原创 uniapp生命周期/路由跳转
1.应用生命周期（仅可在App.vue中监听）（1）onLaunch（当uni-app 初始化完成时触发（全局只触发一次））App.vue里的onLaunch中option作用：获取用户进入小程序或退出小程序的场景值（2）onShow（当 uni-app 启动，或从后台进入前台显示）监听用户进入小程序（3）onHide（当 uni-app 从前台进入后台）监听用户离开小程序（4）...
2020-03-06 16:02:10
8974
原创 uniapp之tabBar/页面切换
1.uniapp项目在微信小程序中打开（1）运行—运行到小程序模拟器—运行设置（2）复制微信发开发者路径（3）运行—运行到小程序模拟器—微信开发者工具(W)-[hello]（开启第一项）（4）进入微信开发者工具（5）再次进入HBX，运行------运行到小程序模拟器—微信开发者工具(W)-[hello]此时微信开发者工具里就有了uniapp项目2.uniapp项目实现切换页面...
2020-03-04 18:27:25
9588
4
原创 uniapp基础学习
1.概念 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。2.特点1.跨平台更多2.运行体验更好3.通用技术栈，学习成本更低（vue的语法，微信小程序的api）4.开放生态，组件更丰富3.安装（1）通过HBuilderX可视化界面...
2020-03-03 17:01:55
701
原创 微信小程序基础知识学习（二）
1.允许上传的文件后缀名1.wxs 2.png 3.jpg 4.jpeg 5.gif 6.svg 7.json 8.cer 9.mp3 10.aac11.m4a 12.mp4 13wav 14.ogg 15.silk2.sitemap配置具体配置说明页面收录设置：可对整个小程序的索引进行关闭，小程序管理后台-设置-基本设置-页面收录...
2020-03-02 16:54:11
216
原创 微信小程序基础知识学习（一）
1.小程序简介小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。2.使用 JS-SDK 调用图片预览组件wx.previewImage({ current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg', urls: [ // 所有图片的URL列表，数...
2020-02-28 16:43:53
2320
原创 vue-router学习
1. 概念Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。使用 router-link 组件来导航.通过传入 to 属性指定链接. 默认会被渲染成一个 <a> 标签2.安装方法一：新建vue项目时直接下载方法二：安装 npm install vue-router --sa...
2020-02-27 16:10:32
77
原创 vue-cli项目中使用axios/vant
1.下载安装执行下载命令：npm i axios -S / npm install axios --save-dev查看是否安装成功：package.json里main.js里引入index.vue页面data外面接接口mounted:function(){ this.axios.get("http://news-at.zhihu.com/api/4/new...
2020-02-26 13:28:23
940
原创 vue入门及常用指令
1.安装vue1.安装node.js，安装完node.js之后，npm也会自动安装查询是否安装成功的命令：node -vnpm -v2.npm install --global vue-cli3.vue项目初始化命令如下，若没有安装webpack，则先安装webpacknpm install -g webpackvue init webpack <font color=g...
2020-02-25 15:53:40
124
原创 git基本操作流程
1.git简介在实际开发中，会使用git作为版本控制工具来完成团队协作。git命令可以分为这样的逻辑进行理解和记忆：1.git管理配置的命令； 几个核心存储区的交互命令：2.工作区与暂存区的交互；3.暂存区与本地仓库（分支）上的交互；4.本地仓库与远程仓库的交互。2.2. git配置命令查询配置信息列出当前配置：git config --list;列出reposi...
2020-02-25 12:50:17
402
原创 ES6基础语法学习
1.ES6简介全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。2.let命令一.ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。二.for循环的计数器，很合适使用let命令。另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单...
2020-02-24 15:58:43
200
原创 chrome浏览器的调试工具
1.直接打开控制台Fn+F122.Elements标签页这个就是查看、编辑页面上的元素，包括HTML和CSS：3.Resources标签页Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。这里的CSS文件有一个特性，你可以直接修...
2020-02-24 12:53:55
240
原创 promise基础学习
1.promise是什么？Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.promimse的出现是为了方便前端的异步操作2.创建及使用因为是一个对象，所以需要实例化一下:new Promise(function) 注意首字母是大写的(构造函数)promise接受一个参数，类型为function，将在实例化之后执行，这个函数又有两个参数，是由实例化时给与的，第...
2020-02-24 11:36:12
132
原创 vue-cli构建项目中使用sass/less
1.vue-cli项目如何使用sass？接下来安装 node-sass 这个插件，同时安装 sass-loader ，执行安装命令：npm i --save-dev node-sass sass-loader"node-sass": "^4.13.1", "sass-loader": "^8.0.2",在需要使用sass/scss的组件中修改style标签：// 在项目中使用...
2020-02-24 11:14:03
233
原创 less入门及语法了解
1.less官方网站：英文：http://www/lesscss.org/中文：http://www.lesscss.net/2.less.js下载：一.输入网址：http://www.lesscss.net二.点击更新日志三.点击less.js四.点击右边的download zip五.在下载到的文件夹里找到压缩包六.点开找到less文件，dist/less七.将les...
2020-02-21 19:49:08
149
原创 初见less
1.什么是less？Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。2.less安装安装命令：npm install -g less3.检测安装成功与否：lessc -v如果显示如下信息就说明安装成功4.less写法如下：新建以les...
2020-02-21 18:17:45
107
原创 sass入门（变量和嵌套）
1.嵌套规则Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：#main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; }}2. 父选择器 &可以用 & 代表嵌套规...
2020-02-21 13:51:08
240
原创 sass初步了解及安装
1.什么是sass？sass是一种css预处理器借助sass语法，我们能更加高校的为页面编写样式sass可以让我们使用一些css中没有实现的功能，例如变量，嵌套，组合，继承等等；我们使用sass语法来编写.scss文件，然后使用sass预处理器将它们编译为.css文件，最后将编译产生的.css文件应用到我们的工程中。2.sass安装执行命令npm install -g sass监...
2020-02-18 17:46:57
108
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人