- 博客(38)
- 收藏
- 关注
原创 uniapp锚点定位
给最外层大盒子添加了高度(min-height: 100%;) goTop(){ uni.createSelectorQuery().select('.shoplist').boundingClientRect(data => {// 需要跳转到的节点 uni.createSelectorQuery().select('.goods').boundingClientRect(res => { // 当前页面最外层节点 // console.log(data...
2022-05-26 15:04:03
273
原创 uniapp点击加载更多
<view class="presons"> <view class="record"> <view class="record_a">跟团记录</view> <view class="uni-list-cell-db">只看我带来的订单</view> <switch @change="switch2Change" /> </view> <view class..
2022-05-25 19:06:15
475
原创 uniapp写微信授权登录
html部分<button class="login-btn" type="primary" @click="getUserInfo"> 微信用户一键登录 </button>js部分 /** * * 获取用户信息 */ getUserInfo() { // 展示加载框 uni.showLoading({ title: '加载中', }); u...
2022-05-24 16:52:46
1089
2
原创 vue父组件调用子组件方法
//父组件 <view class="hex" @click="hexiaosub">保存主页核销码</view> <hwxtPopup ref="hwxt" ></hwxtPopup> import hwxtPopup from "../../../subPage/components/hwxtPopup/advertPopup.vue" components: { hwxtPopup, },methods: {//保存核销码 .
2022-05-23 19:06:39
254
原创 uniapp编写单选按钮
<view style="display: flex;justify-content: space-between;"> <h3>切换店铺营业状态</h3> <uni-icons type="closeempty" size="20"></uni-icons> </view> <view style="display: flex;flex-direction: column;">...
2022-05-20 15:17:43
268
原创 uniapp下拉弹出层
<html> <picker @change="onRecipientChangeSelect" :value="recipientIndex" :range="recipient" range-key="name"> <view class="uni-input p-0"> {{recipient[recipientIndex].name}}<text class="iconfo...
2022-05-11 15:49:40
826
原创 uniapp自定义导航栏
<template> <view> <uni-nav-bar left-icon="left" @clickLeft="back"> <view class="titlenav" @click="onchange"> <text class="tit_a">{{titles}}</text> <uni-icons type="bottom" size="15" v-if="jiantou">...
2022-05-10 18:47:38
550
原创 uniapp全选与单选
<template> <view> <q-addBtn @openAdd="openPage('add')"></q-addBtn> <view class="d-flex a-center j-end bg-white"> <view class="flex-1"> <q-search @search="openPopupSearch"></q-search> </vie.
2022-04-19 13:39:38
560
原创 vue 指令
指令:以v-开头的自定义标签属性。 v-text:将data中的数据渲染到绑定的标签中。 v-text会替换标签中原本的内容。 {{}}相当于占位符,只会替换自己本身。 v-html:将data中的数据渲染到绑定的标签中,v-html会解析数据中的html代码。 注意:在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html,永不用在用户提交的内容上。 用户提交的东西:一定要做好验证。 <!-- 不要在app容器上...
2021-12-28 19:27:18
396
原创 vue表达式
插值表达式: 语法:{{数据/表达式}} 功能:向页面渲染数据或表达式的结果。 插值表达式会自动将vue实例中的data属性中的数据取出,渲染到页面上。 算术运算: + - * / % 调用方法 Math.floor Date.now() 三元表达式注意:[千万不要写 js语句。] 比如: var a = 10+20; if else 语句等。<div id="app"> <!-- ...
2021-12-28 19:17:58
1098
原创 vue (一)
vue是什么?中文官网:https://cn.vuejs.org/渐进式javaScript渐进式:vue全家桶其实包含甚多的vue的扩展插件vue :核心库vue-cli:vue脚手架vue-resource:ajax请求(axios)vue-router:路由vuex:状态管理element-ui:基于vue的组件库 你可以一步一步有阶段性地来使用vue,如果是简单应用,只需要一个核心库就可以,100KB左右。复杂应用可以按需加载各种各样的插件,这就...
2021-12-28 19:09:47
217
原创 session
1.不同开发模式下的身份认证- 前后端分离:Ajax请求接口(html,css等静态资源是不请求服务器的,只有数据是请求接口返回的。) 推荐JWT认证- 服务端渲染(将整个页面以字符串的方式返回给浏览器) 推荐使用sessionweb开发 网页程序开发2. 什么是http无状态http协议的无状态,指的是客户端的每次http请求都是独立的。连续多个请求之间是没有直接的关系的,服务器不会主动保留每次http请求的状态假设场景:购物网站购物流程:1. 找到要买的东西2. ..
2021-12-27 11:02:22
84
原创 封装增删改查
const mysql = require("mysql");const pool = mysql.createPool({ host: "localhost", user: "root", password: "root", database: "py", // 可选 queueLimit: 3, connectionLimit: 20})//添加一个query方法let query = function (sql) { return new Promise((.
2021-12-27 10:13:57
443
原创 node.js(二)
1. node的模块化2. 模块的分类- 内置模块(核心模块) 由node官方提供。常见的有:fs,path,http等- 自定义模块 用户创建的每一个js文件都是一个自定义模块。- 第三方模块 由第三方开发,使用之前需要下载安装。3.模块作用域和函数作用域类似,在自定义模块中的变量,函数等成员,只能在当前模块中使用,这种模块级别的访问限制,就叫做模块作用域。好处:防止全局变量污染。模块的导入和导出导出新建一个a.js文件,里面的代码如下:```js//..
2021-12-16 09:41:38
86
原创 NODE.JS笔记(一)
1.模块化用什么方式来暴露数据 : export用什么方式来导入数据 : import在服务器端运行HTML文件,在script标签中添加【type='module'】来表示该js文件是一个模块。 在模块中,如果要导出变量,则使用 export let 变量名 = 变量值 这个方式可以导出多次,或者将多个变量一起导出 export { 变量1,变量2 } 导入和导出时,变量名必须保持一致。 要修改...
2021-12-16 09:22:50
73
原创 关于 transform: scale(x.y)缩放
在html和 css前期布局写样式的过程中,有关图片放大效果: .Granite:hover img { transform: scale(1.1); }这样写,只是让图片放大,父级元素设定图片的大小就会失去效果,如果想要不超过估计范围,只需要给父级加:overflow: hidden;...
2021-11-26 00:07:33
461
原创 对象
对象:万物皆对象。 面向对象编程语言而言。概念现实中的对象: 一个具体的事物,看得见,摸得着。 具有属性和行为。 描述一个事物时,使用名词的都是属性,使用动词的都是行为。js中的对象: 一个抽象的概念,用来描述具体的事物的。也有属性和行为。 属性可以是基础数据类型,也可以是复杂数据类型。行为:函数。js中的对象是由 多个键值对组成。声明对象的方式1.通过构造函数var obj = new Object();2.字面量方式 var obj = {}//也可以直接..
2021-11-19 10:33:53
427
原创 基础数据类型与复杂数据类型的区别
概念基础数据类型:在存储时,变量中存储的是值本身,因此也叫做值类型。复杂数据类型:在存储时,变量中存储的是地址(引用),因此也叫做引用类型。赋值基础数据类型将存储的值赋值给新的变量,赋值后,两个变量没有关系。修改其中一个,不会影响另外一个。复杂数据类型,将存储的地址赋值给新的变量,赋值后,两个变量指向同一个对象。通过一个变量修改对象,另外一个访问时也是被修改后的对象。比较两个基础数据类型比较,直接比较值。两个复杂数据类型比较,比较的是地址是否相同。 也就是说,要看两个变量是否
2021-11-19 09:39:11
1278
原创 数组
为什么要使用数组?当我们需要表示多个数组时,一个一个定义十分不方便。比如:一个班级中所有人的名字。所有门店的年销售记录,一个门店一年的日销售额。数组的概念一组数据的集合。在数组中可以存放任意类型的数据。每一个数据我们称之为元素。每一个元素在数组中是有编号的,这个编号就称之为下标。声明定义数组1.构造函数var arr = new Array();//还可以在定义数组中,定义数组中保存的数据。var arr = new Array(10,20,30)//注意 这里的10
2021-11-18 09:16:19
401
原创 运算符
算术运算符 + - * / % 一元运算符一元运算符:只作用到一个值上面的运算符,就叫做一元运算符。 +(正号) 自动类型转换,相当于调用了Number(); -(负号)自动类型转换,同时会改变值的正负号。 ++ 自增1 -- 自减1 自增自减 前置自增/自减:会改变自身的值,然后再去参与运算 后置自增/自减:先去参与运算,再改变自身的值。 var a = 10;// 先将a的值,也就是10
2021-11-16 12:50:09
217
原创 函数
函数是什么函数:具有某种特定功能的代码块。 对比学习的变量,变量用于保存数据,函数用于保存代码块。为什么要使用函数可以提高代码的复用性函数使用函数的分类官方内置函数alert();console.log();document.write();Number()Boolean()....自定义函数由编程人员自己定义的函数定义函数声明式function 函数名(){ //函数体 : 函数在被调用(使用)时执行的代码}赋值式var 函..
2021-11-16 11:34:47
96
原创 分支嵌套
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
2021-11-10 14:56:04
131
原创 九九乘法表-js
<script> for (var i = 1; i <= 9; i++) { for (var j = 1; j <= i; j++) { document.write(j + "×" + i + "=" + (j * i) + " "); } document.write("<br>") } </script>...
2021-10-27 20:11:40
69
原创 转换2D-3D
转换是css3中新增的一个特性。可以实现元素的位移,旋转,缩放,变形。2D转换1.缩放:scale/* 第一种写法 n 表示缩放的倍数,n大于1表示放大,n小于1表示缩小。*/transform:scale(n);/* 第二种写法 x 表示水平方向上的缩放倍数,y表示垂直方向上的缩放倍数。*/transform:scale(x,y);2.位移:translate(重点)...
2021-10-20 15:37:46
102
原创 html中内容超出显示省略号的方法
我们在切页面的时候,文字内容太多,我们需要在一定宽度内显示文字,超出宽度的文字内容隐藏,并且显示省略号,这个效果怎么实现?通过做很多次项目,我总结了以下的实现方法。html中内容超出显示省略号来看看怎么实现。overflow:hidden;text-overflow: ellipsis;white-space:nowrap;想要实现省略号效果,必须同时设置这三个样式才行。设置的文字内容两行,多余的内容隐藏并且显示省略号的效果。webkit-line-clamp设置这个属性的.
2021-10-19 20:27:12
3111
原创 弹性盒子
弹性盒子叫flex,如何才能创建一个弹性盒子,需要使用display: flex; 兼容性兼容性如果我们的项目需要兼容到IE低版本,则不能使用flex特点flex可以直接替代浮动实现网页布局,同时比浮动更简单,更容易,但是,刚开始学习,会觉得属性比较多,难以掌握内部规则我们称添加了flex属性的元素为容器,容器内部的子元素叫项目 容器有两个方向的轴,横轴和纵轴,默认横轴为主轴 每个方向的轴都有开始和结束两个点,flex-start 和 flex-en...
2021-10-14 19:20:19
164
原创 定位-position
定位有很多种方式 static 默认值(不定位) relative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 粘性定位 relative 相对定位top left right bottom当我们给一个元素添加了相对定位属性,该元素默认情况下不会有任何的变化。我们可以通过上下左右四个值调整元素的位置。虽然我们会看到元素位置改变,但是,对于布局来讲,元素位置就像没有改变一样.box { position: r.
2021-10-14 19:02:06
333
原创 前端第二篇-学成在线首页(作品)
学成在线页面制作页面展示:学成在线,是典型的企业级网站。学习学成网的目的,是为了整体感知企业级网站布局流程,带着大家复习以前的知识1.前期准备素材学成在线PSD源文件 开发工具 = PS(切图) + sublime(代码) + chrome(测试)2.前期准备工作先把我们的前期准备工作做好, 我们本次采取结构与样式相分离思想。 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。 用vscode打开study目录文件夹. study 目
2021-10-13 15:30:56
1336
1
原创 浮动布局--清除浮动
什么是浮动?float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。语法:选择器 { float: 属性值; }浮动特性加了浮动之后的元素,会具有很多特性,需要我们掌握的.1、浮动元素会脱离标准流(脱标:浮动的盒子不再保留原先的位置) 2、浮动的元素会一行内显示并且元素顶部对齐注意:浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。3、浮动的元素会具有行..
2021-10-13 14:28:28
222
原创 一、其他样式
1、圆角边框在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角。语法:border-radius:length;参数值可以是数值或百分比的形式 如果是正方形,想要设置一个圆,直接写为50% 简写属性,分别代表左上角、右上角、右下角、左下角 分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和borde
2021-10-13 11:23:56
95
原创 Web-盒子模型
display可以把元素转换成各种形态(块元素,行内元素,行内块元素,隐藏)block inline inline-block none块元素和行内元素的区别块元素可以设置宽高,margin和padding都是有效果的,独占一行,后面的元素会换行行内元素不能设置宽高,margin和padding只有左右生效,上下无效,内容多少就多少,所有元素一行排列,空间不够换行行内块元素可以设置宽高,margin和padding都有效果,不设置宽高的情况下,靠内容撑开,设置宽高后,也只占宽高区
2021-10-11 13:41:03
682
原创 CSS的样式-字体2
文本对齐 text-alignleft 默认 right center justify文本对齐属性是给块元素添加,给行内元素添加无效。作用就是让块元素内部的文字和行内元素居中选择器 { text-align: center}text-decoration我们可以使用该属性删除a标签的下划线。a { text-decoration: none;}.oldPrice { text-decoration: line-through;}text-indent
2021-10-11 10:29:03
56
原创 CSS样式-文字样式
颜色color(可继承性)用来修改文字的颜色选择器 { color: 颜色色值;}字体大小 font-size (可继承)设置文字的大小选择器 { font-size: 14px;}字体样式 font-style (可继承)设置文字是否倾斜normal italic 斜体 oblique 倾斜选择器 { font-style: normal;}大部分情况都是将i em设置为不倾斜状态字体重量 font-weight (可继承)设置.
2021-10-11 10:15:58
87
原创 关于CSS的简介及用法
什么是css?层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。...
2021-10-09 14:02:43
264
原创 前端初学者第一篇
41.编辑器初学者第一具备的是在自己的电脑上安装程序员编写代码所要使用的工具(.vscode\hbuilder\sublime text3等)2.什么是网页?1.网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)2.网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页.3.HTML: 超文本标记语言, 用来制作网页的一门语言. 有标签组成的. 比如 图片标签 链接标签 视频标签等…3.什么是HTML?1.HTML 指.
2021-10-08 13:46:47
145
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人