调调啊-CSDN博客

效果就是像这样 , 三张图三张图的轮播 , 本文会讲vue 和uni-app 中分别怎么实现 , 其实写法是一样的, 只是组件标签不一样vue中 , 用的vant组件库Vant 2 - Mobile UI Components built on Vuetemplate<van-swipe class="swipe" :autoplay="2000" indicator-color="black"> <van-swipe-item .

2022-02-25 10:27:45 2400

原创 vue 中怎么监听屏幕触底事件

项目中有一个表格 , 用原生table写的 , 要做下拉加载功能 , 原理就是当屏幕滚到底部时 , 把pageNo++ , 再触发一次请求数据 , 把请求回来的下一页数据合并到前一页数组中this.list = this.list.concat(data);created() { window.addEventListener('scroll', this.Scrollbottom); //页面加载时监听滚动事件 },destroyed() { windo...

2022-02-22 10:11:06 3264

原创 css手写移动端导航栏横向拖动 , 并有锚点定位

需求 : 移动端导航栏太长 , 超出了屏幕 , 需要溢出隐藏 , 手指可以横向拖动//结构<div class="nav"> <ul> <li><a href="#support">营销支持</a></li> <li> <a href="#visit"> 客户拜访 </a></li> <li>.

2022-02-21 16:48:25 995

原创 git上传本地代码到远程仓库 , 以及在本地新建一个分支用于开发

一 , 自己在码云新建一个仓库二 , 点击创建之后 , 点一下初始化readme文件三 , 仓库默认只有master一个分支,里面有刚才初始化的两个文件,点击分支 1可以看到详情四 , 回到桌面新建一个文件夹 , 里面新建一个a.txt(不能是空文件夹 , 会报错)打开文件夹 , 右键点 git bash heregit init (初始化仓库)git add . (添加本次所有改动到本地暂存区)git commit -m.

2022-01-21 10:57:01 3085

原创 git操作大全

经过了整整一天的奋斗 , 总算是把困扰我很久的git搞明白了 , 赶紧记录一下 , 最常见的情况就是公司把你拉进已有的项目仓库 , 让你把某个分支的代码拉到本地进行开发 , 开发完了再上传到远程仓库的这个分支 .我今天研究的就是这种情况码云注册账号 , 下载git全局配置邮箱账号这些就不讲了 , 这里主要讲git操作一 ,自己在码云新建一个仓库(实际开发一般是公司给你仓库地址或把你拉进仓库) , 这里为了演示就自己新建的仓库二 , 点击创建之后 , 点一下初始化readme文

2022-01-20 19:19:19 569

原创 vue中用原生table写可编辑表格 , 点击按钮添加行 , 点击序号删除行

主要功能 :1 , 一个表格 , 单元格内容是循环渲染的 , 点击每个单元格弹出一个输入框 , 编辑内容2 , 点击按钮添加行 , 点击序号删除行刚开始想用插件写的 ,网上找了半天, 研究好久搞不出来需要的效果, 最后还是自己用table标签手写实现的<template> <div> <table class="tb1"> <tr class="th"> &l...

2021-12-22 17:09:12 2827

原创 vue中获取当前日期 , 获取当前日期所在周的日期 , 获取所选日期所在周的日期

一, 获取当前日期//template中调用这个方法日报 ( {{getDate()}} )//获取当前日期的方法 getDate() { var time = new Date() console.log(time); var y = time.getFullYear() //年 var m = (time.getMonth() + 1).toString().padStart(2, '0') //月 var d

2021-12-21 10:39:39 3876 1

原创 uni-app 使用escook/request-miniprogram插件发请求

一 ,npminstall@escook/request-miniprogram用这个插件发请求的优点就是可以直接在main.js中设置请求拦截器和响应拦截器 , 还有根路径 , 比较方便二 , main.js中// 导入发请求的包,并挂载到uni身上import { $http} from '@escook/request-miniprogram'uni.$http = $http// 请求根路径 $http.baseUrl = '/api' //请求拦截器...

2021-12-15 17:20:54 19793 14

原创 H5页面禁止微信分享转发按钮

一 ,设置微信jssdk ,jsApiList中加上 "hideMenuItems"因为这次项目微信jsApiList都是另一个部门的人配的 , 不是我这边弄 , 我只用把要加哪些api告诉他 , 他配好就行了 , 如果需要你自己配 , 可以查下别的博客微信jsApiList怎么配置wx.config({ debug: false, appId: 'appid', timestamp: timestamp, ...

2021-12-15 15:58:56 1678

原创 vue移动端项目怎么自适应不同屏幕尺寸 rem.js

一 , 在config文件夹下新建一个rem.js文件, 代码直接贴过去/*(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.client

2021-12-13 16:53:04 1965

原创 vue中怎么修改单个页面body的背景色

在需要修改body背景色的.vue文件里,写如下js代码 beforeCreate() { document.querySelector('body').setAttribute('style', 'background-color:#fff') }, beforeDestroy() { document.querySelector('body').removeAttribute('style') },设置完后 , 这个页面的背景色就会变成白色 , 别

2021-12-13 16:40:03 3114 1

原创 vue中怎么使用Base64加密解密

一 , npm ijs-base64 , 安装插件二 , 需要用到base64的vue页面 , 直接写js代码使用加密 mounted() { let Base64 = require('js-base64').Base64 console.log(Base64.encode('今天星期一')); },控制台打印解密 mounted() { let Base64 = require('js-base64').Base6...

2021-12-13 15:19:55 1884

原创 vue中路由跳转怎么携带参数

A组件点击跳到B组件 , 携带参数过去A组件中 (传参)这里的Bpage是B页面的name <div v-for="(item, index) in list" :key="index" @click="toDetail(item.username)"> {{ item.title }} </div> toDetail(info) { this.$router.push({ name: "Bp.

2021-12-13 15:04:47 473

原创 vue-seamless-scroll 的click不触发问题

项目里有一个无缝滚动的列表效果 , 用的vue-seamless-scroll 插件 , 可以实现列表滚动没问题 , 但因为列表每一条都有click事件 , 最近发现总是有一条点不动 , 审查元素发现是：当第一个ul中的数据滚动完时,第二个ul 里的li的click事件不起作用解决方法这是之前的写法（可以循环显示，点击第一个ul里的li可以触发click事件，但是点击第二个ul里的li不能触发click事件) , 关于vue-seamless-scroll的一些配置可以看我另一篇

2021-12-02 17:10:51 1055

原创 vue中img的src属性绑定问题

最近发现一个问题 , img的src直接写图片地址，可以正常渲染，但是用:src写的时候，图片就加载失败了比如 , 我这样写 , 图片是能出来的 <img src="@/assets/images/1.png" alt="">但是我写成 : src , 图片就裂开了<img :src="'@/assets/images/1.png'" alt="">解决方法 : :src里配置成变量 , 用require引入图片地址...

2021-11-22 17:52:06 1137

原创前端encodeURI , decodeURI对字符串编码解码 , 以及把url中的%0A %20解码成换行和空格

一 , 对字符串进行编码 var str = "岁月不居，时节如流" console.log(str); str = encodeURI(str) console.log("====编码之后===="); console.log(str);控制台打印二 ,对字符串进行解码var str = "%E5%B2%81%E6%9C%88%E4%B8%8D%E5%B1%85%EF%BC%8C%E6%97%B6%E8%8A%82%E5%A6%...

2021-11-18 15:48:12 9892

原创字符串里有\r \n \t 等特殊符号, 前端页面怎么显示出来

如图, 右边是后端返回给我的数据 , 包含\r\n , 就是换行加空格 ,页面上要像左边一样显示出换行及空格,如果直接用普通标签渲染数据 , 换行和空格不会显示出来 , 这时候需要用pre标签渲染一 , pre标签的作用<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。如果想要把某一段规定好的文本格式放在HTML中，那么就要利用pre元素的特性二 ...

2021-11-17 16:40:29 9390

原创 vue中怎么显示第三方外部链接的页面 , 或显示后端返回的.html页面,.doc链接等

使用iframe标签可以在本地项目页面中嵌入外部页面一 , template中<iframe :src="this.txtUrl" frameborder="0" width="100%" :style="{height:calHeight}" scrolling="auto"></iframe>二 , script中 data() { return { txtUrl: "http://wwww.baidu.c

2021-11-17 10:35:46 8090 4

原创 vue页面怎么显示本地的pdf文件

一 ,npm install --save vue-pdf 下载插件包二 , 新建一个.vue页面 , 把下面代码全部复制过去 , 打开vue页面就是pdf了<template> <div class="pdf"> <pdf v-for="currentPage in pageCount" :key="currentPage" :src="src" :page="currentPage" @loaded="loadPdfHandler"&gt...

2021-11-15 20:55:19 5057 2

原创 vue页面怎么加水印

一 , 新建一个watermark.js文件 , 把下面代码贴过去let watermark = {}let setWatermark = str => { let id = '1.23452384164.123412416'; if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)); } //创

2021-11-15 20:22:22 144

原创＜van-list＞＜/van-list＞列表组件的使用

<template> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <van-cell v-for="(item, index) in list" :key="index"> {{item}}} </van-cell> </van-list></template>&l.

2021-11-12 11:49:51 6955

原创 vue中怎么把图片转换成base64字符串 , 以及base64字符串怎么转换成图片路径

一 , 项目根路径npm i vant , 安装vant组件库 ,main.js中引入并注册vant二 , 页面中使用van-uploader上传文件的组件<template> <div> <van-form ref="formRef"> <van-field> <template #input> <van-uploader v-model="fil...

2021-11-05 16:01:57 4478

原创怎么批量修改文件名

一 , win+R 打开cmd命令, cd到需要修改文件名的文件路径二 , 然后 Dir /b>1.xls , 文件夹里会生成一个1.xls三 ,打开1.xls，如果第一行不是1.xls，需要删除第一行，在B列输入更改后的文件名（注意：包含后缀名），例如在B2单元格输入"1.jpg"，B列与A列一一对应。在C1单元格输入下列公式，向下拖动="ren "&A1&" "&B1四 , 在文件夹中...

2021-11-02 20:03:54 18546 3

原创获取定位及附近位置 , 输入框搜索附近位置（三种方法）

本文的两种方法 , 服务器都必须升级到httpshttp的网址无法获取定位, 只能在localhost本地浏览器里获取到研究这个定位已经研究几天了 , 百度都翻烂了 , 最后还是没搞出来http下怎么获取定位, 如果有知道的大神可以指教一下先看结果 , 有两个功能一 : 获取当前定位以及附近位置(高德api直接获取 / 浏览器api获取经纬度再用高德api逆地址解析出具体位置)二 : 一个输入框可以输入搜索位置 (不是搜索附近的 , 是输入哪里就搜出哪)测试发现, 用高德ap..

2021-10-11 17:53:14 6198 1

原创怎么截取浏览器地址栏里的参数

这是地址栏http://127.1.1.1/h5/index.html?login_name=abc&mx_sso_token=123456#/需要截取login_name和mx_sso_token当做参数发送请求一, onLoad中调用方法 (其实onLoad里的option就是地址栏的参数信息, 打印出来看下有没有 , 有的话就能直接获取到了) onLoad(option) { //打印参数 console.log(option) // 获..

2021-10-11 17:10:38 403

原创原生js手写下拉选择框

效果如下贴代码 (死数据)<!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.

2021-08-11 11:03:53 879

原创 vue 项目中怎么解决跨域 , has been blocked by CORS policy

当浏览器向后端接口请求数据时 , 会出现跨域问题 , 出现如下报错我的后端接口地址是 :https://www.uinav.com/api/public/v1/home/swiperdata一 , 项目根目录新建 vue.config.js配置跨域module.exports = { devServer: { proxy: { '/api': { target: 'htt...

2021-08-06 16:04:10 13163

原创 uni-app 项目中怎么解决跨域 , has been blocked by CORS policy

经过前天一下午加昨天一天的艰苦奋斗 , 终于把这个跨域问题给解决了 , 尝试了两个项目的几个接口, 都可以成功后端接口地址是 :https://www.uinav.com/api/public/v1/home/swiperdata一 , manifest.json 中, 点源码视图 ,加上跨域配置// h5端跨域配置 "h5": { "devServer": { "disableHostCheck": true, "proxy": { "/ap...

2021-08-06 15:01:30 5476 2

原创 uni.showToast和uni.navigateTo不能同时执行 , 怎么解决

刚刚发现uni-app项目中,uni.showToast和uni.navigateTo不能同时执行 , 比如下面的代码 , 我想showToast之后 ,navigateTo首页, 但发现弹出提示框之后, 并没有跳到首页uni.showToast({ title: '登录成功', duration: 2000, icon: "none" }); uni.navigateTo({ url: '../index/in...

2021-08-05 17:34:15 1641

空空如也

空空如也