minbaowang / sseffects Goto Github PK
View Code? Open in Web Editor NEWsome small effects in my code's history
sseffects's People
Stargazers
sseffects's Issues
关于原生js进行ajax请求那些事
ajax核心步骤
1）创建请求对象: new XMLHttpRequest()
2）配置参数，建立与服务器的连接 open(请求类型,请求地址,是否异步)
3）发送请求 send()
4)在js中处理数据 onreadystatechange
* 数据存入 responseText属性中
处理数据时有两种接收方式，一种是readystatechange，另一种是onLoad
//onreadystatechange接收
//判断状态，先预存数组
let statusCode = [200,304];
//第一步，创建一个请求
var xhr=XMLHttpRequest();
//第四步，处理数据
xhr.onreadystatechange=()=>{
//事件会执行四次，最后一次才获取参数
if(xhr.readyState===4&&statusCode.indexOf(xhr.status)>=0){
let res=xhr.responseText;
//进行你要的操作
}
}
//第二步，配置参数，创建与副武器的连接
//第一个参数是请求类型，第二个参数是请求的API，API上面可以拼接参数
xhr.open('get/post','API');
//第三步，发送请求
xhr.send();//这是onload
let statusCode = [200,304];
//第一步，创建一个请求
var xhr=XMLHttpRequest();
//第四步
xhr.onload = function(){
if(statusCode.indexOf(xhr.status)>=0){
//不用判断次数，因为onload是整个页面加载完毕了
let res = xhr.responseText;
}
}
//第二步，配置参数，创建与副武器的连接
//第一个参数是请求类型，第二个参数是请求的API，API上面可以拼接参数
xhr.open('get/post','API');
//第三步，发送请求
xhr.send();页面底部滚动条，替代element的table滚动条（外部组件）
#页面底部滚动条，替代element的table滚动条
1、html部分
<div id="footer-scroll-bar" class="footer-scroll-bar" v-if="show">
<div class="footer-scroll-bar-content" :style="{width: width}" @scroll="scroll" ref="scrollBar">
<div class="footer-scroll-bar_bar" :style="{width: scrollWidth}"></div>
</div>
</div>2、js部分
/*
* @Author JL_Guan && wangfumin
* 页面底部滚动条，替代element的table滚动条
* 先在入口使用Vue.use注册
* 在页面上使用: const bar = this.initScrollBar(className | Element, className | Element)
* 在watch里面使用，tableData数据变化时重新调用this.initScrollBar(className | Element, className | Element)
* 考虑到性能问题, 有必要时可以在页面上的beforeDestroy钩子调用 bar.removeListener()
*/
define([
'itFooterScrollBar.html',//引进html文件和css文件，具体文件夹路径视自己的构造
'itFooterScrollBar.css',
], function (template, css) {
"use strict"
return function (Vue) {
const vm = new (Vue.extend({
name: 'itFooterScrollBar',
template,
data: () => ({
body: '',
container: '',
scrollWidth: 0,
width: 0,
// 滚动节点
scrollNode: '',
// 是否需要显示滚动条
show: true,
}),
methods: {
/**
* 初始化函数
* @Author JL_Guan && wangfumin
* @param {[String | Element]} body [滚动条容器]
* @param {[String | Element]} container [设置了overflow：auto的容器]
* @return {[type]} this [返回当前实例]
*/
init(body, container) {
if (!body) {
return new Error('Please enter a node or string！');
}
this.$nextTick(() => {
// 若在created调用, 此时dom还没加载，更新后再获取
this.body = typeof body === 'string' ? document.querySelector(body) : body;
this.container = typeof container === 'string' ? document.querySelector(container) : container;
if (!this.body) return;
this.scrollNode = this.body.querySelector('.el-table__body-wrapper');
if (this.container.scrollHeight - this.container.clientHeight > 50) {
this.show = true;
this.scrollNode.style.overflow = 'hidden';
} else {
this.scrollNode.style.overflow = 'auto';
this.show = false;
}
this.width = this.body.clientWidth + 'px';
this.addListener(body, container);
if (!this.body.querySelector('#footer-scroll-bar')) {
this.appendChild();
}
this.setStyle();
})
return this;
},
setStyle() {
// 异步获取table表格
const fn = () => {
if (!this.body) return;
const tableNode = this.body.querySelector('.el-table');
const el_table_body = tableNode.querySelector('.el-table__body');
this.scrollWidth = el_table_body.clientWidth / tableNode.clientWidth * this.body.clientWidth + 'px';
// 去除el-table的滚动条
const fixed = tableNode.querySelector('.el-table__fixed');
const fixed_right = tableNode.querySelector('.el-table__fixed-right');
// 把滚动条的高度补回去
if (fixed) {
fixed.style.height = parseInt(fixed.style.height) + (this.show ? 8 : -1) + 'px';
}
if (fixed_right) {
fixed_right.style.height = parseInt(fixed_right.style.height) + (this.show ? 8 : -1) + 'px';
}
}
// 当在created的时候调用，未加载dom
setTimeout(() => {
fn();
}, 500)
},
appendChild() {
this.body.appendChild(this.$el);
},
// 滚动事件
scroll(e) {
if (!this.show) return;
if (this.scrollNode) this.scrollNode.scrollLeft = e.target.scrollLeft;
},
addListener(body, container) {
const fn = this.throttle(this.init, 200);
// 监听页面宽度变化
if (!window.onresize) window.onresize = (e) => {
fn(body, container);
}
if (!this.container) return;
const tableNode = this.body.querySelector('.el-table');
this.container.onscroll = this.throttle((e) => {
if (e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop < 50) {
this.scrollNode.style.overflow = 'auto';
this.show = false;
} else {
this.scrollNode.style.overflow = 'hidden';
this.show = true;
}
}, 200)
},
// 移除所有监听
removeListener() {
if (window.onresize) {
window.onresize = null;
}
if (this.container) this.container.onscroll = null;
},
// 简单节流
throttle(fn, delay) {
let time;
return (body, container) => {
if (time) {return;}
time = setTimeout(() => {
time = null;
fn(body, container);
}, delay)
}
},
},
}))
Vue.prototype.initScrollBar = vm.$mount().init;
}
}
)3、scss部分
.footer-scroll-bar-content {
width: 500px;
overflow-x: auto;
position: fixed;
bottom: 0;
z-index: 1000;
&::-webkit-scrollbar-thumb:hover {
background: #909090;
}
}
.footer-scroll-bar_bar {
height: 10px;
width: 1250px;
}移动端单个子元素左右拉
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>左右滑动</title>
<script src="jquery-2.1.4.min.js"></script>
<style>
li {
border: 1px solid #dfdfdf;
height: 50px;
position: relative;
width: 140%
}
li div {
width: 30%;
height: 30px;
float: right
}
</style>
</head>
<body>
<div style="height:1000px;overflow-x:hidden;">
<p class="sdf">x:,y:</p>
<p class="sf">x:,y:</p>
<div class="2">
<li id="1">
<div style="background-color:red;"></div>
</li>
<li id="2">
<div style="background-color:blue;"></div>
</li>
<li id="3">
<div style="background-color:green;"></div>
</li>
<li id="4">
<div style="background-color:black;"></div>
</li>
<li id="5">
<div style="background-color:gray;"></div>
</li>
</div>
</div>
<script>
$(document).ready(function() {//ready（）文档加载完执行函数
var obj;
var startx;
var starty;
var overx;
var overy;
for(var i = 1; i <= $("li").length; i++) { //为每个li标签添加事件
obj = document.getElementById(i); //获取this元素
evenlistener(obj); //调用evenlistener函数并将dom元素传入，为该元素绑定事件
}
function evenlistener(obj) {
obj.addEventListener('touchstart', function(event) { //touchstart事件,当鼠标点击屏幕时触发
startx = event.touches[0].clientX; //获取当前点击位置x坐标
starty = event.touches[0].clientY; //获取当前点击位置y坐标
$(".sdf").text("x:" + startx + ",y:" + starty + "") //赋值到页面显示
}, false); //false参数,设置事件处理机制的优先顺序，具体不多说，true优先false
obj.addEventListener('touchmove', function(event) { //touchmove事件,当鼠标在屏幕移动时触发
overx = event.touches[0].clientX; //获取当前点击位置x坐标
overy = event.touches[0].clientY; //获取当前点击位置y坐标
var $this = $(this); //将dom对象转化为jq对象，由于项目用到jquery，直接使用其animate方法
if(startx - overx > 10) { //左滑动判断，当左滑动的距离大于开始的距离10进入
$($this).animate({
marginLeft: "-55px"
}, 150); //实现左滑动效果
} else if(overx - startx > 10) { //右滑动判断，当右滑动的距离大于开始的距离10进入
$($this).animate({
marginLeft: "0px"
}, 150); //恢复
}
}, false);
obj.addEventListener('touchend', function(event) { //touchend事件,当鼠标离开屏幕时触发，项目中无用到，举例
$(".sf").text("x:" + overx + ",y:" + overy + "")
}, false);
}
});
</script>
</body>
如何在发送另一个同样的请求前截断上一个同样的请求
##场景：页面搜索等频繁发送请求，有时候因网络原因未请求完成，数据回在请求后才生成，因此可能会跟搜索不符合
// 截断请求 类（默认截断）
class Ajax {
constructor() {
// 存储对应的接口cancelToken方法
this.cancelTokenObj = {};
return this.init();
}
init() {
return (options, cancelToken = true) => {
// options可以为url
if (typeof options === 'object') {
options.method = options.method || 'post';
if (cancelToken) {
const { cancelTokenObj } = this;
const source = axios.CancelToken.source();
// 取消相同接口请求
const fn = Object.keys(cancelTokenObj).find(key => key === options.url.replace(contextPath, ''));
if (fn) cancelTokenObj[fn]();
// 添加cancelToken
options.cancelToken = source.token;
// 存储对应url的cancel方法
cancelTokenObj[options.url.replace(contextPath, '')] = source.cancel;
}
}
// 利用promise重新封装请求
return new Promise(res => {
axios(options).then(data => {
res(data);
}).catch((e) => {});
})
}
}
}
// 初始化
const ajax = new Ajax();##使用
//获取会话详情用户信息
function getSessionDetailUserInfo(sessionId) {
return ajax({
data: {
sessionId: sessionId,
},
method: 'post',
url: contextPath + '/qiyu/getCustomerInfo.action',
},false);//此处未false则不截断，不加即默认截断
}滑动的上拉和下拉加载和跳转
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>上拉刷新/跳转，下拉返回/刷新</title>
<script src="jquery-2.1.4.min.js"></script>
<style>
li {
border: 1px solid #dfdfdf;
height: 50px;
position: relative;
width: 140%
}
li div {
width: 30%;
height: 30px;
float: right
}
.pr_upMore {
width: 94%;
padding: 28px 3%;
display: inline-block;
background-color: #fff;
text-align: center;
line-height: 16px;
position: fixed;
bottom: 0;
}
.pr_upMore .pr_upMore_ico {
display: inline-block;
vertical-align: middle;
margin-right: 3px;
}
.pr_upMore span {
font-size: 12px;
color: #666;
}
.icon-a-goods-upper {
display: block;
background-image: url(../assets/a.png);
background-position: -244px -368px;
background-size: 443px;
width: 16px;
height: 16px;
}
.pr_upMore span {
font-size: 12px;
color: #666;
}
</style>
</head>
<body>
<div style="height:1000px;overflow-x:hidden;">
<p class="sdf">x:,y:</p>
<p class="sf">x:,y:</p>
<div class="2">
<li id="1">
<div style="background-color:red;"></div>
</li>
<li id="2">
<div style="background-color:blue;"></div>
</li>
<li id="3">
<div style="background-color:green;"></div>
</li>
<li id="4">
<div style="background-color:black;"></div>
</li>
<li id="5">
<div style="background-color:gray;"></div>
</li>
</div>
<div class="pr_upMore" @click="picture">
<span class="pr_upMore_ico icon-a-goods-upper"></span>
<span>点击进入商品信息</span>
</div>
</div>
<script>
var arr1 = [];//用来判断是否是第一次拉倒上面
var arr2 = [];//用来盘点是否是第一次拉倒底部
$(document).ready(function() { //ready（）文档加载完执行函数
$(window).scroll(function() {
var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
var scrollHeight = $(document).height(); //当前页面的总高度
var windowHeight = $(this).height(); //当前可视的页面高度
if(scrollTop + windowHeight >= scrollHeight) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
if(arr2.length == 0) {
arr2.push("1");
console.log(arr2)
} else {
arr2 = [];
alert("上拉加载，要在这调用啥方法？");
}
} else if(scrollTop <= 0) { //滚动条距离顶部的高度小于等于0
if(arr1.length == 0) {
arr1.push("1");
console.log(arr1)
} else {
console.log(666)；
arr1 = [];
alert("下拉刷新，要在这调用啥方法？");
}
}
})
})
</script>
</body>
微信小程序输入框历史搜索纪录
#微信小程序输入框历史搜索纪录
1、获取输入框的值
<input type="text" name="searchpage" bindinput='getValue' class="spage" placeholder="输入搜索内容" bindtap='search' />
//获取输入框的值
getValue(e){
var that=this;
that.setData({
search : e.detail.value//获取bindinput的值
})
}2、点击搜索按钮将输入框的值写进缓存
<button class="btn" bindtap="goSearch">搜索</button>
//点击搜索进入搜索加入缓存记录
search(){
console.log(this.data.searchStorage)
//控制搜索历史
var self = this;
if (self.data.search != '') {
//将搜索记录更新到缓存
var searchData = self.data.searchStorage;
searchData.push({
id: searchData.length,
name: self.data.search
})
wx.setStorageSync('searchData', searchData);
self.setData({ StorageFlag: false, })
}
}3、进来页面获取缓存，并点击输入框出现历史记录或者常在
<view class="history" wx:for="{{searchStorage}}">{{item.name}}</view>
data: {
search:"",
searchStorage:[],
StorageFlag:false
}
//打开历史记录列表
openLocationsercher: function () {
this.setData({
searchStorage: wx.getStorageSync('searchData') || [],
StorageFlag: true,
listFlag: true,
})
}
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.openLocationsercher();
}4、页面需要清空历史记录按钮，绑定清空函数
<button bindtap='clearSearchStorage'>清空历史记录</button>
//清除历史记录
clearSearchStorage: function () {
wx.removeStorageSync('searchData')
this.setData({
searchStorage: [],
StorageFlag: false,
})
}##微信小程序搜索历史form表单实现
//form表单上的实现，和上面不一样的就是用form包着
1、获取表单输入值
//form表单绑定提交函数
<form class="search-page" bindsubmit='searchSubmitFn'>
<input type="text" value="{{searchValue}}" name="input" class="spage" placeholder="输入搜索内容"/>
<button class="btn" formType='submit'>搜索</button>
</form>
//点击搜索按钮提交表单跳转并储存历史记录
data: {
inputVal:'',
searchRecord: []
},
searchSubmitFn: function (e) {
var that = this
var inputVal = e.detail.value.input
var searchRecord = this.data.searchRecord
console.log(searchRecord)
if (inputVal == '') {
//输入为空时的处理
return
}
else {
//将搜索值放入历史记录中,只能放前五条
if (searchRecord.length < 5) {
searchRecord.unshift(
{
value: inputVal,
id: searchRecord.length
}
)
}
else {
searchRecord.pop()//删掉旧的时间最早的第一条
searchRecord.unshift(
{
value: inputVal,
id: searchRecord.length
}
)
}
//将历史记录数组整体储存到缓存中
wx.setStorageSync('searchRecord', searchRecord)
}
},2、
//打开历史记录列表
openHistorySearch: function () {
this.setData({
searchRecord: wx.getStorageSync('searchRecord') || [],//若无储存则为空
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.openHistorySearch()
},3、清除记录
<button bindtap='historyDelFn'>清空历史记录</button>
//清除历史记录
historyDelFn: function () {
wx.clearStorageSync('searhRecord')
this.setData({
searchRecord: []
})
},keystone.js简单教程（持续学习中）
#1.安装
1、请注意：安装之前需要Node.js和MongoDB，最好的安装方式是借助yeoman的generator，运行命令：
$ npm install -g yeoman
$ npm install -g generator-keystone
$ mkdir myproject
$ cd myproject
$ yo keystone
在回答所有generator问题以后，运行下面命令：
node keystone (或 npm start)现在你可登录管理界面： http://localhost:3000/keystone 能够快速创建一篇帖子，，就会在/blog路由目录下发表，它是高度可配置的。管理也方便。
#2.增强定制
1、缺省的bootstrap模板是非常简单的，推荐使用一些基于bootstrap的高阶模板，可使用 jade, handlebars 等其他模板引擎，这些在前面产生应用时是可选的。
2、Keystone.js默认是不会为每个页面定制<title> 和 的，但是这对于搜索引擎抓取以及SEO等却非常重要。
3、在Post模型中增加两个字段：name和description
Post.add({
title: { type: String, required: true },
state: { type: Types.Select, options: 'draft, published, archived', default: 'draft', index: true },
author: { type: Types.Relationship, ref: 'User', index: true },
publishedDate: { type: Types.Date, index: true, dependsOn: { state: 'published' } },
image: { type: Types.CloudinaryImage },
//新增加meta
meta:{
name:{type:String},
description:{type:String}
},
content: {
brief: { type: Types.Html, wysiwyg: true, height: 150 },
extended: { type: Types.Html, wysiwyg: true, height: 400 },
},
categories: { type: Types.Relationship, ref: 'PostCategory', many: true },
});微信小程序日历组件（包含遮罩层）
##html结构
<!--隐藏区域 -->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<!--弹出框 -->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
<!-- 头部 -->
<view class="box_header">
<view class="desk_title">座位数量</view>
<view class="desk_num">
<view class="desk_num_plus" bindtap='plus_num'>+</view><view class="desk_number">{{startNum}}</view><view class="desk_num_sub" bindtap='sub_num'>-</view>
</view>
</view>
<!-- 日历 -->
<view class="desk_title_time">使用日期</view>
<view class="modal-dialog" hidden="{{showModalSecond}}">
<view class='modalBox'>
<view class='box'>
<view class='calendarBox'>
<view class='calendarTitle'>
<!-- 修改插件的代码 -->
<view class='lt-arrow' bindtap='lastMonth'>
<image src='../../images/arrow_left.svg' mode='aspectFit'></image>
</view>
{{year}}年{{month}}月
<view class='rt-arrow' bindtap='nextMonth'>
<image src='../../images/arrow.svg' mode='aspectFit'></image>
</view>
</view>
<block wx:for="{{week}}" wx:key="item">
<view class="week">{{week[index]}}</view>
</block>
<block wx:for="{{weekNum}}" wx:key="item">
<view class="week" style="border-bottom:0;color:transparent">0</view>
</block>
<block wx:for="{{dayList}}" wx:key="item">
<view class='week' style="border-bottom:0;background-color:{{dayIndex>index?'#f1f1f1':(tapThis==index?'#1296db':'')}};color:{{tapThis==index?'white':''}}" catchtap="lightChoose" data-index="{{index}}" data-value="{{item}}">{{item}}</view>
</block>
</view>
</view>
</view>
</view>
<!-- 底部 -->
<view class="box_bottom" catchtap="chooseDateSecond">确认预定</view>
</view>
##css部分
/* 隐藏区域 */
.commodity_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.2;
overflow: hidden;
z-index: 1000;
color: #fff;
}
/*对话框 */
.commodity_attr_box {
height: 800rpx;
width: 100%;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
background: #fff;
padding-top: 20rpx;
}
.box_header{
position:relative;
margin-left:32rpx;
margin-right:32rpx;
height:100rpx;
line-height:100rpx;
}
.desk_title{
position: absolute;
left:0;
}
.desk_num{
position: absolute;
right:0;
width:20%;
display:flex;
}
.desk_num_plus,.desk_num_sub,.desk_number{
flex:1;
display:flex;
align-items: center;
justify-content: center;
}
.box_bottom{
position: fixed;
bottom:0;
width:100%;
height: 100rpx;
background: #681831;
color:#fff;
text-align: center;
line-height: 100rpx;
}
/* 日历 */
/* 修改的样式 */
.lt-arrow,.rt-arrow{
position: absolute;
top: 1rpx;
width: 60rpx;
height: 60rpx;
}
.lt-arrow image,.rt-arrow image{
width: 32rpx;
height: 32rpx;
}
.lt-arrow{
left: 110rpx;
}
.rt-arrow{
right: 100rpx;
}##data数据部分
data: {
showModal: false,
showModalSecond: false,
weekLength: 7,
week: ["日", "一", "二", "三", "四", "五", "六"],
dayList: [],
weekNum: 0,
tapThis: 0,
thisMonth: 0,
thisYear: 0,
dayIndex: 0,
year: 0,
month: 0,
chooseDateFirst: "",
chooseDateSecond: "",
startNum:0
},
clickme: function () {
this.showModal();
}##js逻辑部分
//显示对话框
showModal: function () {
// 显示遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
showModalStatus: true
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}.bind(this), 200)
},
//隐藏对话框
hideModal: function () {
// 隐藏遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export(),
showModalStatus: false
})
}.bind(this), 200)
},
// 日历
getWeek(year, month, day) {
var that = this;
var d = new Date();
d.setFullYear(year);
d.setMonth(month - 1);
d.setDate(1);
var n = d.getDay();
var arr = [];
var Index = 0;
var dayN = 1;
for (var i = 0; i < day; i++) {
arr.push(dayN++);
}
var now = new Date();
var nowYear = now.getFullYear();
var nowMonth = now.getMonth() + 1;
var nowDay = now.getDate();
var val = 1;
if (year == nowYear) {
if (month == nowMonth) {
Index = arr.indexOf(nowDay);
console.log(Index);
val = nowDay;
}
}
that.setData({
weekNum: n,
dayList: arr,
dayIndex: Index,
tapThis: Index,
thisMonth: month,
thisYear: year,
chooseDate: year + "-" + month + "-" + val,
})
},
chooseDateSecond(e) {
var that = this;
console.log(this.data.tapThis);
that.setData({
// 保存日期，并计算
// 隐藏弹框
})
this.hideModal()
},
// 高亮选择的日期
lightChoose(e){
var that = this;
var n = e.currentTarget.dataset.index;
var val = e.currentTarget.dataset.value;
this.setData({
tapThis: n
})
},
getDayNum(year, month) { //传入参数年份 和 要计算的月份， 可以为字符串，也可以为数字。
var that = this;
var d = new Date();
d.setFullYear(year);
d.setMonth(month);
d.setDate(0);
return d.getDate();
// console.log(d.getDate()); //d.getDate() 即为此月的总天数！
},
// 上个月
lastMonth: function () {
//全部时间的月份都是按0~11基准，显示月份才+1
let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;
let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;
let days = this.getDayNum(year, month + 1)
this.setData({
year: year,
month: (month + 1)
})
this.getWeek(year, month + 1, days)
},
// 下个月
nextMonth: function () {
//全部时间的月份都是按0~11基准，显示月份才+1
let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
let month = this.data.month > 11 ? 0 : this.data.month;
console.log(month)
let days = this.getDayNum(year, month + 1)
this.setData({
year: year,
month: (month + 1)
})
this.getWeek(year, month + 1, days)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 日历
var that = this;
var mydate = new Date();
var year = mydate.getFullYear();
var month = mydate.getMonth();
var months = month + 1;
this.data.year = year;
this.data.month = months;
this.data.day = mydate.getDate();
this.data.days = that.getDayNum(this.data.year, this.data.month)
that.getWeek(this.data.year, this.data.month, this.data.days); //使用方法： 在此函数内传入年、月、日(此月的天数)即可。
this.setData({
year: this.data.year,
month: this.data.month,
chooseDateFirst: this.data.year + "-" + this.data.month + "-" + this.data.day,
chooseDateSecond: this.data.year + "-" + this.data.month + "-" + this.data.day
})
},
// 座位数量增减
plus_num(){
let that=this.data
let deskNum=that.startNum
deskNum++
this.setData({
startNum:deskNum
})
},
sub_num(){
let that = this.data
let deskSubNum = that.startNum
deskSubNum--
if (deskSubNum<=0){
deskSubNum=0
this.setData({
startNum: deskSubNum
})
}else{
this.setData({
startNum: deskSubNum
})
}
},#两个日期选择框的日历组件描述
##html部分
<!-- 日历 -->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{showModal}}"></view>
<view class="modal-dialog" hidden="{{showModal}}">
<view class='modalBox'>
<view class='box'>
<view class='calendarBox'>
<view class='calendarTitle'>
<!-- 修改插件的代码 -->
<view class='lt-arrow' bindtap='lastMonth'>
<image src='../../images/arrow_left.svg' mode='aspectFit'></image>
</view>
{{year}}年{{month}}月
<view class='rt-arrow' bindtap='nextMonth'>
<image src='../../images/arrow.svg' mode='aspectFit'></image>
</view>
</view>
<block wx:for="{{week}}" wx:key="item">
<view class="week">{{week[index]}}</view>
</block>
<block wx:for="{{weekNum}}" wx:key="item">
<view class="week" style="border-bottom:0;color:transparent">0</view>
</block>
<block wx:for="{{dayList}}" wx:key="item">
<view class='week' style="border-bottom:0;background-color:{{dayIndex>index?'#f1f1f1':(tapThis==index?'#1296db':'')}};color:{{tapThis==index?'white':''}}" catchtap="chooseDate" data-index="{{index}}" data-value="{{item}}">{{item}}</view>
</block>
</view>
</view>
</view>
</view>
<!-- 第二份 -->
<view class="modal-mask" bindtap="hideModalSecond" catchtouchmove="preventTouchMove" hidden="{{showModalSecond}}"></view>
<view class="modal-dialog" hidden="{{showModalSecond}}">
<view class='modalBox'>
<view class='box'>
<view class='calendarBox'>
<view class='calendarTitle'>
<!-- 修改插件的代码 -->
<view class='lt-arrow' bindtap='lastMonth'>
<image src='../../images/arrow_left.svg' mode='aspectFit'></image>
</view>
{{year}}年{{month}}月
<view class='rt-arrow' bindtap='nextMonth'>
<image src='../../images/arrow.svg' mode='aspectFit'></image>
</view>
</view>
<block wx:for="{{week}}" wx:key="item">
<view class="week">{{week[index]}}</view>
</block>
<block wx:for="{{weekNum}}" wx:key="item">
<view class="week" style="border-bottom:0;color:transparent">0</view>
</block>
<block wx:for="{{dayList}}" wx:key="item">
<view class='week' style="border-bottom:0;background-color:{{dayIndex>index?'#f1f1f1':(tapThis==index?'#1296db':'')}};color:{{tapThis==index?'white':''}}" catchtap="chooseDateSecond" data-index="{{index}}" data-value="{{item}}">{{item}}</view>
</block>
</view>
</view>
</view>
</view>#启动的html部分
<view class="weui-cells weui-cells_after-title ">
<view class="weui-cell weui-cell_access" hover-class="weui-cell_active" catchtap='showModalBtn'>
<view class="weui-cell__ft weui-cell__ft_in-access">{{chooseDateFirst}}</view>
</view>
<view class="hr">—</view>
<view class="weui-cell weui-cell_access" hover-class="weui-cell_active" catchtap='showModalBtnSecond'>
<view class="weui-cell__ft weui-cell__ft_in-access">{{chooseDateSecond}}</view>
</view>
</view>##css部分
.weui-cells{
margin-left:20rpx;
margin-bottom:30rpx;
display:flex;
}
.weui-cell{
flex:1;
}
.weui-cell__ft{
border:1rpx solid #681831;
border-radius: 16rpx;
font-size:28rpx;
background: #681831;
padding:10rpx 40rpx;
color:#fff;
text-align: center;
}
.hr{
width:100rpx;
text-align: center;
}
.modalBox{
width: 100%;
font-size: 32rpx;
}
.box{
margin: 0 auto;
width: 630rpx;
}
.calendarTitle{
/* margin: 0 auto;
width: 630rpx; */
width: 100%;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border-bottom: 1rpx solid #ddd;
position: relative;
}
.calendarBox{
/* width: 630rpx; */
width:100%;
margin: 0 auto;
border:1rpx solid #ddd;
}
.week{
display: inline-block;
width:90rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
border-bottom: 1rpx solid #ddd;
}
.dateBtn{
width:100%;
height: 80rpx;
display: flex;
justify-content: space-between;
margin-top: 20rpx;
}
.dateBtn>button{
width: 45%;
height: 100%;
display:flex;
justify-content: center;
align-items: center;
margin: 0;
font-size: 36rpx;
}
/* 模态框 */
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
}
.modal-dialog {
width: 85%;
padding: 100rpx 30rpx 30rpx 30rpx;
overflow: hidden;
position: fixed;
top: 20%;
left: 0;
right: 0;
margin: 0 auto;
z-index: 9999;
background: rgba(255, 255, 255, 1);
border-radius: 5rpx;
}
/* 修改的样式 */
.lt-arrow,.rt-arrow{
position: absolute;
top: 1rpx;
width: 60rpx;
height: 60rpx;
}
.lt-arrow image,.rt-arrow image{
width: 32rpx;
height: 32rpx;
}
.lt-arrow{
left: 110rpx;
}
.rt-arrow{
right: 100rpx;
}##data部分
showModal: true,
showModalSecond: true,
weekLength: 7,
week: ["日", "一", "二", "三", "四", "五", "六"],
dayList: [],
weekNum: 0,
tapThis: 0,
thisMonth: 0,
thisYear: 0,
dayIndex: 0,
year:0,
month:0,
chooseDateFirst: "",
chooseDateSecond: ""##js部分
getWeek(year, month, day) {
var that = this;
var d = new Date();
d.setFullYear(year);
d.setMonth(month - 1);
d.setDate(1);
var n = d.getDay();
var arr = [];
var Index = 0;
var dayN = 1;
for (var i = 0; i < day; i++) {
arr.push(dayN++);
}
var now = new Date();
var nowYear = now.getFullYear();
var nowMonth = now.getMonth() + 1;
var nowDay = now.getDate();
var val = 1;
if (year == nowYear) {
if (month == nowMonth) {
Index = arr.indexOf(nowDay);
console.log(Index);
val = nowDay;
}
}
that.setData({
weekNum: n,
dayList: arr,
dayIndex: Index,
tapThis: Index,
thisMonth: month,
thisYear: year,
chooseDate: year + "-" + month + "-" + val,
})
},
chooseDate(e) {
var that = this;
var n = e.currentTarget.dataset.index;
var val = e.currentTarget.dataset.value;
console.log(n);
if (n >= that.data.dayIndex) {
that.setData({
tapThis: n,
chooseDateFirst: that.data.thisYear + "-" + that.data.thisMonth + "-" + val,
showModal: true,
})
}
},
chooseDateSecond(e) {
var that = this;
var n = e.currentTarget.dataset.index;
var val = e.currentTarget.dataset.value;
console.log(n);
if (n >= that.data.dayIndex) {
that.setData({
tapThis: n,
chooseDateSecond: that.data.thisYear + "-" + that.data.thisMonth + "-" + val,
showModalSecond: true,
})
}
},
/**
* 弹出框蒙层截断touchmove事件
*/
preventTouchMove: function () {
},
/**
* 隐藏模态对话框
*/
hideModal() {
var that = this;
that.setData({
showModal: true
})
},
hideModalSecond() {
var that = this;
that.setData({
showModalSecond: true
})
},
showModalBtn() {
var that = this;
that.setData({
showModal: false
})
},
showModalBtnSecond() {
var that = this;
that.setData({
showModalSecond: false
})
},
getDayNum(year, month) { //传入参数年份 和 要计算的月份， 可以为字符串，也可以为数字。
var that = this;
var d = new Date();
d.setFullYear(year);
d.setMonth(month);
d.setDate(0);
return d.getDate();
// console.log(d.getDate()); //d.getDate() 即为此月的总天数！
},
// 上个月
lastMonth: function () {
//全部时间的月份都是按0~11基准，显示月份才+1
let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;
let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;
let days = this.getDayNum(year, month+1)
this.setData({
year: year,
month: (month + 1)
})
this.getWeek(year, month+1, days)
},
// 下个月
nextMonth: function () {
//全部时间的月份都是按0~11基准，显示月份才+1
let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
let month = this.data.month > 11 ? 0 : this.data.month;
console.log(month)
let days = this.getDayNum(year, month+1)
this.setData({
year: year,
month: (month+1)
})
this.getWeek(year, month+1, days)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
//获取当前年月日
var that = this;
var mydate = new Date();
var year = mydate.getFullYear();
var month = mydate.getMonth();
var months = month + 1;
this.data.year = year;
this.data.month = months;
this.data.day = mydate.getDate();
this.data.days=that.getDayNum(this.data.year, this.data.month)
that.getWeek(this.data.year, this.data.month, this.data.days); //使用方法： 在此函数内传入年、月、日(此月的天数)即可。
this.setData({
year: this.data.year,
month: this.data.month,
chooseDateFirst: this.data.year + "-" + this.data.month + "-" + this.data.day,
chooseDateSecond: this.data.year + "-" + this.data.month + "-" + this.data.day
})
},水平垂直居中的一点小心得
###水平垂直居中的一点小心得（笔者忽略定位居中，可自行了解）
//本文有点初级，大佬就别点进来看了，适合新手看这个攻略
##水平居中
1、text-align的用法
//新手最容易犯的小错误：没有清楚的认识到text-align只能用在行内元素上
text-align:center;//行内元素才能用2、margin:0 auto;
//而在块级元素中，一般要居中某个元素，用margin:0 auto;
margin:0 auto;//块级元素用3、justify-content:center;;
//而在响应式布局中，一般要居中某个元素，用justify-content:center;
display:block;
justify-content:center;//两句必须同时用##垂直居中
1、line-height:height;和vertical-align:middle;
2、响应式布局flex下的垂直居中:align-items：center
display:flex;
align-items：center//写在父元素上，这样子元素才会居中实现Vue中的吸顶菜单
//原理：通过检测window的滚动事件，让滚动的scroll到一定程度，菜单固定在顶部。
在Vue中只要写好一个样式，当scrollTop>offsetTop时触发该样式，即可固定
//这是html部分
<body>
<div class="searchBar" id="searchBar">
<ul :class="searchBarFixed == true ? 'isFixed' :''">
<li>首页</li>
<li>分类</li>
<li>购物车</li>
<li>个人</li>
</ul>
</div>
</body>//这是css样式
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
}
.searchBar {
position: absolute;
width: 100%;
top: 300px;
border-bottom: 1px solid #ddd;
}
.isFixed {
position: fixed;
background-color: #Fff;
top: 0;
z-index: 999;
}
ul {
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
}
li {
font-size: 0.8rem;
text-align: center;
flex: 1;
}//这是Vue内的数据驱动
new Vue({
el: "#searchBar",
data: {
searchBarFixed: false;
},
//生命周期，加载完成时监听滚动事件
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
//定义一个方法
methods: {
handleScroll() {
//滑动过的距离
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//console.log(scrollTop)
//获取一开始距离头部的距离
var offsetTop = document.querySelector('#searchBar').offsetTop;
//console.log(offsetTop)
if(scrollTop > offsetTop) {
this.searchBarFixed = true;
} else {
this.searchBarFixed = false;
}
}
},
//当退出页面时破坏这个滚动事件，即移除该事件
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
}
})封装一个微信小程序request请求方法
作者：皮蛋小粥
参考原文：https://blog.csdn.net/qq442270636/article/details/79274128
//定义主链接
var rootDocment = 'https://xxxxxxxxxxxxx/';
var header = {
'Accept': 'application/json',
'content-type': 'application/json',
'Authorization': null,
}
//get请求的时候用function getReq(url, cb) {
wx.showLoading({
title: '加载中',
})
console.log("header=="),
console.log(header)
wx.request({
url: rootDocment + url,
method: 'get',
header: header,
success: function (res) {
wx.hideLoading();
return typeof cb == "function" && cb(res.data)
},
fail: function () {
wx.hideLoading();
wx.showModal({
title: '网络错误',
content: '网络出错，请刷新重试',
showCancel: false
})
return typeof cb == "function" && cb(false)
}
})
}//post请求的时候用
function postReq(url, data, cb) {
wx.showLoading({
title: '加载中',
})
console.log("header=="),
console.log(header),
wx.request({
url: rootDocment + url,
header: header,
data: data,
method: 'post',
success: function (res) {
wx.hideLoading();
return typeof cb == "function" && cb(res.data)
},
fail: function () {
wx.hideLoading();
wx.showModal({
title: '网络错误',
content: '网络出错，请刷新重试',
showCancel: false
})
return typeof cb == "function" && cb(false)
}
})
}//将模块导出
module.exports = {
getReq: getReq,
postReq: postReq,
header: header,
}Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.