- 博客(43)
- 资源 (6)
- 收藏
- 关注
RSS订阅
原创 小程序实现手写左右翻页和动态修改横向滚动条位置
timg.jpg首先看效果图image.pngimage.pngimage.pngimage.pngimage.pngimage.png注意：也可以通过手指左右进行滑动到指定的页数进行点击展示数据具体实现思路1.首先用css和html进行页面的布局2.因为考虑到总的页数是一个不...
2019-11-25 15:32:41
537
原创 eclipse导入jstl标签库方法
eclipse导入jstl标签库方法eclipse导入jstl经常出现问题如图：当你在uri里面实用快捷方式：alt+/的时候发现什么都没有，解决这个问题的方法请看下面的图：我的路径在D盘，找到一个java_web项目打开，按照提示找到对应的路径下可以看到有三个包，找到jstl-1.2.jar直接复制，然后粘贴到自己的项目的lib下，这个时候再次使用快捷方式：alt+/就可以看出来有效果了，如果：...
2018-06-06 13:28:40
4930
原创 安卓和IOS拨打电话
image.png<view @tap.stop="handlePhone(item.storeTel)" class="t-r colorxl"> <view class="img" style="width: 28rpx;height: 28rpx;margin-right: 4rpx;"> <image style="width:1...
2022-05-04 18:24:04
340
原创 uniapp引入vantUI库
image.pnguniapp引入vantUI库下载vant组件vant的GitHub下载地址下载完成后解压，然后在项目更目录下创建文件夹wxcomponents，注意这里的wxcomponents目录级别和pages在同一级别，然后再该目录下创建vant目录。回到刚才解压的vant目录，找到dist文件夹，把它复制到vant目录下image.png引用vant组件...
2021-12-16 10:11:24
2674
原创 vue3-ref、reactive、toRefs响应式引用
vue.jpgref、reactive响应式引用引用<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=...
2021-12-04 17:39:32
614
原创 vue使用html2canvas合成图片
vue.jpg先看效果image.png---start---1.先安装依赖[传送门] (http://html2canvas.hertzen.com/)npm install --save html2canvas2.引入html2canvas.min.js3.引入canvas2image.js[传送门](https://github.com/hongru/ca...
2021-12-03 14:27:08
1503
原创 js通过两种方式进行对商品价格排序
javascript-illustration.pngjs通过两种方式进行对商品价格排序<template> <div class="content"></div></template><script>export default { data() { return { user: { ...
2021-02-13 17:37:24
2329
原创 js商品总价格、最高价格商品、排除重复商品[初版]
javascript-illustration.png实现商品总价格、最高价格商品、排除重复商品<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device...
2021-02-09 17:29:12
222
原创 js添加元素,去重,排序
javascript-illustration.png<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=...
2021-02-08 18:32:53
213
原创 js实现改变原来对象中的键值对对应的值
javascript-illustration.png直接看代码吧let jsonObject = {a:1,b:2,c:3}const { b, ...result } = jsonObject;console.log(result) //{a:1,c:3}result['b'] = 'hello'console.log(result) //{a:1,c:3,b:'h...
2020-04-30 20:28:57
4551
1
原创 程序员表白爱心，使用python打印爱心【二】
5e72d31075db4ae2a0752c26275f0987.jpg打印爱心根据心形曲线公式来的(x2+y2-1)3-x2y3=0def hittyday(a,b=2): print('\n'.join([''.join([(a[(x-y) % len(a)] if((x*0.04)**2+(y*0.1)**2-1)**3-(x*0.04)**...
2020-03-07 13:33:20
1529
原创 python初步探索【一】
5e72d31075db4ae2a0752c26275f0987.jpg使用print输出1.可以输出字符串print('hello python')2.可以输出变量a,b = 5,6print(a,b)3.输出字符串模板方式一：print('a的值:{},b的值:{}'.format(a,b)) #a的值:5,b的值:6方式二：print(...
2020-03-07 12:08:54
184
原创 【三】React事件监听三种写法
image.png方式一：在constructor中使用bind绑定，改变this的指向import React, { Component } from 'react';export default class Group extends Component { constructor(props) { super(props); this....
2020-02-09 01:32:09
4821
2
原创 【二】通过props进行传值，子页面多种方式接收
image.png先看效果图image.png使用常用的三种方式接收父页面传递过来的数据Props.js// import React, { Component } from 'react';// 方式一：接收父页面传递的数据// export default class Props extends Component {// rend...
2020-02-08 20:52:34
1176
原创 【一】React变量渲染和修改数据方式
image.png两种方式渲染并进行修改数据import React, { Component } from 'react';export default class App extends Component { constructor(props) { super(props); this.state = { count: 0...
2020-02-08 20:42:16
1559
原创 【二】TS基本类型
image.png布尔类型booleanlet flag: boolean = true;数字类型numberlet num: number = 0;字符串类型string，可以使用''''或''let str: string = 'hello';let strFn: string = ''hello'';数组类型定义方式一：在变量后面直接跟着[...
2020-01-28 00:45:28
324
原创 【一】TS安装编译配置自动生成.js文件
TS.jpgTypeScript安装npm install -g typescript编译tsc index.tsvscode自动编译.ts文件初始化配置文件tsc --init image.png选择终端-->运行任务-->tsc:监视-tsconfig.json就可以自动生成代码image.png接下...
2020-01-27 03:48:17
2393
原创 vue组件通信，多种传值方式
vue.jpg一、父组件给子组件传递值①父组件向子组件传值定义父组件，父组件传递menuList这个数值给子组件<template> <div> <!-- 通过:绑定需要传递是一个数组 --> <Child :menuList="menuList" /> </div></...
2020-01-26 03:58:19
174
原创 vue路由带参进行传值
vue.jpg先看效果图image.pngimage.png使用path父组件向子组件传值parint// 使用path父组件向子组件传值 /** * 注意： * 1.使用path传值，path和query搭配 * 2.传值使用$router */this.$router.push({ path: 'page2', que...
2020-01-24 01:04:36
291
原创 es6 map使用场景
153407fa1531004667.jpg先看效果图image.pngimage.png假设后台返回的数据是一个数组对象，前端可以使用map返回一个新的数组方式一：var array = [{ title: '测试1', status: 0,}, { title: '测试2', status: 1,}, { ...
2020-01-23 15:39:09
1468
原创 小程序使用template简单演示
timg.jpg先看效果图image.png1.新建一个template文件主要存放通用模板，我这里与pages同级2.在新建好的template文件中使用template，必须定义name，因为在不同页面进行判断需要通过name判断是哪个template3.设置wxss样式4.在需要使用的页面使用import导入wxml页面和wxss文件5....
2020-01-14 15:29:57
289
原创 小程序实现动态修改文字颜色
timg.jpg先看效果图tt.gif直接上代码xml<view class='content-top-box' hidden='{{isFlag}}'> <!-- classIficationList:从接口获取到的数据 --> <!-- colrorList[index]：点击分类修改文字颜色 --&g...
2020-01-13 17:29:38
2376
原创 小程序实现左右分页动态改变横向滚动位置
timg.jpg直接看效果图image.pngimage.pngimage.pngimage.png1.首先需要用到scroll-view，因为数据量比较大默认一页只展示一部分数据2.需要设置位横向滚动，所以需要在scroll-view上设置为scroll-x3.因为需要动态改变滚动距离，所以需要设置scr...
2020-01-10 17:31:17
1358
原创 解决vue项目浏览器控制台行数和项目行数不一致问题
vue.jpg找到webpack.dev.conf.js，在里面找到devtool,修改为source-map就可以了config.devtool('source-map')本次分享就到这里，喜欢的小伙伴欢迎关注支持，后续会带来更多精彩 ...
2020-01-09 15:59:43
3836
1
原创 ERROR in Cannot find module 'node-sass'解决方案
vue.jpg error in ./src/views/layout/components/TagsView.vue?vue&type=style&index=1&lang=scss&Module build failed (from ./node_modules/sass-loader/dist/cjs.js):Error: ...
2020-01-03 15:27:00
1484
原创 使用Promise封装微信request请求
timg.jpg2020到来了，首先祝大家新年快乐直接看代码在开发工具的utils->util.js中封装wx.request请求utils/util.jsGET/** * 封装request请求 *//** * GET */function appGet(url, data = {}, method = 'GET') { return...
2020-01-03 11:51:58
392
原创 小程序使用组件实现顶部导航点击文字变色
timg.jpg先看效果图image.png首先新建一个component的目录，并且和pages是同级image.png在component下新建一个目录my-tab-navimage.png如下图在文件夹下右键后选择第三个，名字和目录名尽量相同image.png引入my-tab-nav组件，需要在my...
2019-12-12 11:00:21
299
原创 CSS实现动画(一)
首先看效果图image.pngimage.pngimage.png具体请看代码实现html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co...
2019-11-28 18:01:52
115
原创 网格布局Grid实现九宫格(绝对单位)
首先看效果图image.png代码实现html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=\, initial-scale=1.0"&g...
2019-11-28 13:50:46
914
原创 弹性布局和实现多边形以及等比缩放
首先看效果图PC端效果：image.png手机端【ios6/7/8/x】效果：image.pngiPad上的效果图：image.pngiPad Pro上的效果图：image.png直接上代码html<div class="content_bottom_serve"> <div cl...
2019-11-21 12:53:37
598
原创 Axios封装、跨域解决、开发环境配置以及代理配置
vue.jpg一、Axios封装安装Axiosnpm i -S axios在src下新建文件件utils->request.jsimage.pngimport axios from 'axios'// 创建axios对象const request = axios.create({ baseURL: '/', ti...
2019-09-21 18:49:04
1471
1
原创 vue-cli配置.json自动生成模板
vue.jpg首先看效果图image.png首先必须安装扩展组件中的Vetur按照提示选择image.png输入vue.json进行打开，发现什么都没有接下来把下面的代码进行复制黏贴后重新新建一个.vue文件，直接输入vue回车后就会发现和上面的效果图一样。{ "Print to console": { ...
2019-09-21 12:46:19
491
原创 配置vue.config.js
vue.jpg在项目根目录下创建vue.config.jsmodule.exports = { devServer:{ port:8888, //端口号 host:'localhost', //主机名 https:false, //协议 open:true, //启动服务会自动打开浏览器访问 }, lintOnSa...
2019-09-21 12:43:50
227
原创 小程序中使用函数节流解决用户频繁点击造成多次响应
timg.jpg小程序防止用户多次点击解决方案【使用函数节流throttle】频繁的点击按钮，会出现多次的响应问题，可以采取函数节流 throttle的方式去解决该问题1.error 示例图image.png2.看看success的示例图以及代码image.png3.首先在该项目所对应的页面中新建一个public.js脚本...
2019-08-29 13:53:43
681
原创 小程序使用echarts-条形统计图
timg.jpg先看效果图image.png下载 GitHub 上的 ecomfe/echarts-for-weixin 项目1.首先在app.json中新建一个页面("pages/echarts/echarts")image.png2.将下载好的echarts-for-weixin-master进行解压后找到ec-canvas该文...
2019-08-29 11:37:53
852
原创 小程序地图map（一）
timg.jpg先看效果图image.pngimage.png微信地图map组件1.相关属性longitude：中心经度latitude：中心纬度scale：缩放级别，取值范围为3-20 默认16markers：标记点polyline：路线circles：圆include-points：缩放视野以包含所有给定的坐标点s...
2019-08-27 19:15:17
763
原创 小程序实现拖拽功能
timg.jpg小程序实现拖拽：movable-area和movable-view必须搭配使用才可以实现1.movable-area必须设置W和H，默认为10px2.movable-view小于movable-area时，movable-view的移动范围是在movable-area内3.direction一共有4个属性：all、vertical、horizon...
2019-08-24 19:37:00
3081
原创 小程序解决页面叠加无限循环
timg.jpgeg：如果在父组件点击进入子组件，子组件为答题系统等，答完后继续在进入答题，经过多次答题后，点击返回的时候会出现一直在两个或者多个页面循环切换1.在你点击进入答题按钮的事件中不要使用navigateTo，而是使用redirectTo[关闭当前页面，跳转到应用内的某个页面]2.在指定的位置加上open-type="navigateBack" ...
2019-08-15 19:23:51
1084
原创 微信小程序用户授权
timg.jpg1.在app.js里设置用户授权和相关信息2.去login.js中去调用方法，获取detail.userInfo3.判断是否授权成功，如果成功友好提示跳转到上个页面否则跳转到login页面app.js this.globalData = {} }, // 授权 is_login:function(){ if (t...
2019-08-12 11:56:10
149
原创 微信小程序 wx.showToast()用法
timg.jpgwx.showToast接口只提供了两种icon【success和loading】展示形式，但是在实际开发中并不满足的。这里可以通过加image:'图片路径' wx.showToast({ title:"成功", icon: 'loading...',//图标，支持"success"、"loading" ...
2019-08-04 22:33:24
13232
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人