2018年07月_hangGe0111

原创小程序scroll-view简单使用,子元素换行在ios中出现子元素不换行问题,没有顶部对齐的问题;去除滚动条样式；子元素文字不换行

1.代码1.1.wxml<scroll-view class='parentone' scroll-x="{{true}}"> <view class='sonone' style='background-color:red;'></view> <view cla...

2018-07-31 11:03:44 979

转载 js实现移动端触屏实现拖拽功能

转载：https://www.jianshu.com/p/750ca057bb3d1.html<div id="div1"></div>2.css* { margin: 0; padding: 0;}html,body { width: 100%; height: 100%;}#div1 { width: 50px; heigh...

2018-07-30 18:24:02 6140

原创 input的type=file上传图片简单使用

1.HTML<img id="preview" /><br /><input type="file" id="filePicker"/>2.jsvar upLoadControl = function() {

2018-07-30 18:23:55 2784

原创 html2canvas.js将html网页保存为图片

1.html<img id="jt_img" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;"/><canvas id="ourCanvas" style="position: absolute; left...

2018-07-30 18:23:48 707

原创 div的contenteditable=true;属性使其可编辑

1.true可编辑2.false不可编辑 http://www.w3school.com.cn/tags/att_global_contenteditable.asp3.plaintext-only只能输入纯文本4.更多参考 https://w3c.github.io/editing/contentEditable.html#contenteditable5.代码和展示...

2018-07-30 18:23:41 1914

原创在触屏端上传图片input的type="file"，拖拽文字域，进行div的contenteditable="true"编辑，再将通过html2canvas.js插件将HTML生成为图片

1.html<img id="jt_img" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: none;"/><canvas id="ourCanvas" style="pos

2018-07-30 18:23:29 605

原创小程序搜索页（bindfocus，bindblur，bindconfirm，bindinput）

1.老版1.1小程序一般会在首页的顶部做一个假的搜索样式 = => 点击该样式跳转到有输入框的页面，在页面输入要搜索的文字，①点击空白处input框失去焦点跳转到搜索结果页②也可以点击键盘上的搜索键，触发跳转到搜索结果③点击取消按钮一般不是清除input框内容停留在本页面而是返回到首页 ==> 到搜索结果页，结果页拿到input框页带过来的关键字请求接口即可；1.2在inp...

2018-07-27 17:42:40 16868 4

原创小程序form表单不定数量的input，select内容提交

1.wxml<view style="width:630rpx;margin:0 auto;"> <form bindsubmit="formSubmit" report-submit="{{true}}">  <view class='jg_input flex flexSb alignC'&amp

2018-07-27 08:31:57 2340

原创小程序页面wx.navigateTo跳转携带参数，wx.navigateBack携带参数，wx.switchTab携带参数，小程序跳转小程序带参

1.(wx.navigateTo)在小程序页面跳转中，页面之间跳转会有携带参数的需要（例如：从列表页跳转到详情，详情需要通过不同的id来请求不同的详情页数据）：（1）跳转有两种： ①标签方式：<navigator url="/pages/shopdetail/shopdetail?id={{item.id}}&name='xiaoming'&age=20...

2018-07-27 08:31:49 57931

转载 javascript 数组以及对象的深拷贝（复制数组或复制对象）的方法

转载：https://blog.csdn.net/fungleo/article/details/54931379javascript 数组以及对象的深拷贝（复制数组或复制对象）的方法前言在js中，数组和对象的复制如果使用=号来进行复制，那只是浅拷贝。如下图演示：如上，arr的修改，会影响arr2的值，这显然在绝大多数情况下，并不是我们所需要的结果。因此，数组以及对象的深拷贝...

2018-07-27 08:31:40 199

原创小程序template模板的使用，写好wxml和wxss，在别的页面引用

1.文件夹建好，template（名字自己取）文件夹里放模板文件wxml,wxss，在需要用的页面进行引入对应的wxml和wxss2.template里的color.wxml<template name="lplist"><!-- 如果有数据两层，这里就写两层循环 --...

2018-07-27 08:31:28 5824

原创微信小程序修改标题

1.对于全部都固定的标题，在app.json统一设置，会在各个页面都一样，具体参考https://developers.weixin.qq.com/miniprogram/dev/framework/config.html2.对于单独页面的固定标题，可以在各自的json文件中设置说明：如果在app.json中和各自的json中同时设置了标题，那么各自json中的标题会覆盖app.j...

2018-07-27 08:31:13 3175

原创小程序swiper轮播图，自定义样式，两种方法：原生方法和bindchange方法；将点点改为数字（当前第几张 /总共几张）;点击点点跳转当前图片

一、点点部分1.1.通过原生方法（1）wxml文件<view class='swiperBar'> <swiper duration="1000" indicator-dots="{{true}}" indicator-color="" interval="2000" current="0" indicator-color=...

2018-07-23 17:52:00 9187 1

原创小程序选项卡tab切换

1.wxml<view class='tab flex flexSa alignC'> <view class='tab_li {{currentData == 0 ? "tab_on" : ""}}' data-current="0" bindtap='changeTab'> <view>1tab1</view>

2018-07-23 17:51:49 1186

原创小程序picker简单使用

1.wxml<view class='yh_select flex flexSb'> <view class='area flex alignC flexC'> <view class='area_text'> <picker class='' bindchange="areaPickerChange" value="{{ar...

2018-07-23 17:51:37 1818

原创小程序图片预览wx.previewImage使用

1.wxml<view class='detailheda_pic'> <block wx:for="{{imglist}}" wx:for-item="img"> <image class='detailheda_pic_img' src='{{img}}' data-src="{{img}}" bindta

2018-07-23 17:51:26 7443 5

转载弹性盒子flex布局

转载自阮一峰老师日志：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一...

2018-07-23 17:51:15 679

原创小程序中几点说明（swiper下边小点，navigator，居中，分门别类轮播图）

1.轮播图swiper下边小点的样式位置可以改变，详情请参考小程序swiper轮播图，自定义样式；2.navigator跳转时会自动添加一个hover-class的样式，如果不需要可通过 hover-class="none" 来阻止其添加，官方文档也有说明，详情请参考官方文档https://developers.weixin.qq.com/miniprogram/dev/componen...

2018-07-23 17:50:56 5553

原创对video标签下载按钮隐藏等几点补充说明

1.正常情况下，一个video标签应该有 “暂停/播放”、“进度条”、“播放进度/播放总时长”、“声音大小控制”、“全屏/非全屏”、“下载按钮”，这些都应该有，但有时候我们需要隐藏一些按钮，例如将下载按钮隐藏等（1）正常状态：（超出部分，如果不给隐藏，则会显示）（2）如果给了隐藏，就不会展示2.代码部分（1）html<div class="video_wrap"...

2018-07-23 17:50:09 1709

转载微信小程序滚动Tab选项卡：左右可滑动切换

转载：https://blog.csdn.net/Sophie_U/article/details/71745125说明：可能在每页都动态加载数据时时用不到，但思想不错微信小程序滚动Tab选项卡：左右可滑动切换最终效果如上。问题：1、tab标题总共8个，所以一屏无法全部显示。2、tab内容区左右滑动切换时，tab标题随即做标记（active）。3、当active的标题...

2018-07-19 08:30:02 284

转载 html中文编码显示乱码

1.在某些手机中，会出现部分中文乱码，例如㎡显示这种情况应该将平方米改为html字符实体，而不能直接通过键盘拼写的；2.如果整片HTML中文都乱码则是文件编码格式的问题有些手机不支持 GB2312 和 GBK格式，最好改为utf-8格式(1)html头部文件中<meta http-equiv="Content-Type" content="text/html; charset=utf-8"...

2018-07-13 17:58:59 3435 1

原创 html中数字换行字母换行

在HTML中纯数字或者纯字母不会自动换行（添加） word-break:break-all;word-wrap:break-word 1.添加前效果（1）纯数字（2）纯字母2.添加后效果（1）纯数字（2）纯字母...

2018-07-13 17:58:39 2970 1

汇总表下面的表将所有运算符按照优先级的不同从高到低排列。优先级运算类型关联性运算符20圆括号n/a( … )19成员访问从左到右… . …需计算的成员访问从左到右… [ … ]new (带参数列表)n/anew … ( … )函数调用从左到右… ( … )18new (无参数列表)从右到左new …17后置递增(运算符在后)n/a … ++后置递减(运算符在后)… --16逻辑非从右到左! …按位...

2018-07-13 17:57:55 2513

原创 jquery.roundabout.js酷炫轮播图

1.css*{margin:0;padding:0;border:0}body{background-color:#2a2a2a}table{border-collapse:collapse;border-spacing:0}ul,li,dd,dl,dt,img{list-style:none}legend{display:none}h1,h2,h3,h4,h5,h6{font-weight:li...

2018-07-10 17:39:28 2595 1

原创 jq倒计时天，时，分，秒

1.HTML部分<span class="joind">135</span>天<span class="joinh">7</span>时<span class="joinm">46</span>分<span class="joins">

2018-07-10 17:38:59 2009

原创 css波纹动画和从中间向两边运动动画

1.波纹(1)html<div class="kefu" style="display: block;"> <div class="round"></div> <div class="img"> <div class='img_fff'></div>

2018-07-10 17:38:40 4064

原创 js资源链接jq地址BootCDN 和一些比较好的网站收藏

1.BootCDN：https://www.bootcdn.cn/1.1.可以搜素需要的网络资源，非常齐全2.这个网站将前端的一些东西做了整理，找起来比较方便2.1 网址：https://www.bestvist.com/nav2.2内容...

2018-07-10 17:38:28 774

转载 HTML字符实体，平方米（㎡）m²

1.平方米（㎡） 200m&sup2;2.大于号（） &gt;

2018-07-10 13:05:31 7350

原创小程序的radio和checkbox外观改变

1.radio外观样式改变 (1)wxml<view style='color:orange;padding-bottom:10rpx'>我们是radio</view><radio-group class="radio-group" bindchange="radioChange"> <label class="radio"&am

2018-07-05 17:20:49 2510

原创 vuejs的computed(计算属性) 和 methods (方法)异同

1.html<div id="demo"> <h1>{{msg}}</h1> <div class="run1">{{methodsRun}}</div> <div class="run2">{{methodsRun()}}</div&g

2018-07-05 16:54:25 715

转载 jquery插件集

jquery插件集地址: 参考地址：http://www.jqhtml.com/category/article/plugs

2018-07-04 10:37:02 133

转载 jq的jsonp跨域请求

转载地址：https://blog.csdn.net/u014607184/article/details/52027879一、同源策略要理解跨域，先要了解一下“同源策略”。所谓同源是指，域名，协议，端口相同。所谓“同源策略“，简单的说就是基于安全考虑，当前域不能访问其他域的东西。一些常见的是否同源示例可参照下表：在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据...

2018-07-04 10:33:37 345

原创 jq的ajax

1.请求1.1 POST请求function listhttp(listtype){ $.ajax({ url: 'http//xxx/api', type: 'POST', data:{"type_num":listtype}, dataType: 'json', success: function(res) { var arr=res.data; i...

2018-07-04 08:57:48 275

转载 ps快捷键操作

切片：ctrl+alt+shift+s对图片进行编辑（旋转，改变尺寸之类的）：Ctrl+t一、工具箱(多种工具共用一个快捷键的可同时按【Shift】加此快捷键选取) 矩形、椭圆选框工具【M】移动工具【V】套索、多边形套索、磁性套索【L】魔棒工具【W】裁剪工具【C】切片工具、切片选择工具【K】路径选择工具、直接选取工具【A】文字工具【T】吸管、颜色取样器、度量工具【I...

2018-07-03 10:24:10 639

原创 ps将psd等比缩放、等份切片、psd转为jpg、Cutterman、切片方法、旋转方法（编辑）

1.psd等比缩放方法通过图像=>图像大小=>（设置宽高）将图片等比缩放，将大图设为标准小图(例如学院的非标准psd处理);2.等份切片方法通过切片(切片选择工具)=> 划分 (等宽或者等高进行等距切片) (注意:切片需要先选中)3.将psd转为jpg方法通过文件=>另存为（可将psd转为jpg）4.psd扩展工具，帮助快速切图 ...

2018-07-03 10:19:01 2917

原创 base64图片压缩

1.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/j

2018-07-02 16:07:18 1717

原创多张图查看大图

1.样式<link rel="stylesheet" href="swiper/swiper.css"><style type="text/css"> /*媒体判断HTML里的font-size*/ html { font-size: 40px; } @media screen and (min-width: 320..

2018-07-02 15:37:38 315

原创一张图查看大图

1.样式<style type="text/css"> /*媒体判断HTML里的font-size*/ html { font-size: 40px; } @media screen and (min-width: 320px) { html { font-size: 17.064px; } } @media screen and (min-width: 360px) { html...

2018-07-02 15:17:17 261

原创 videojs兼容用法

1.头部文件 <head> <title>Video.js | HTML5 Video Player</title>  <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script&g

2018-07-02 14:31:03 5583

空空如也

空空如也