置顶那一年

白驹过隙,时光荏苒。

彩虹 过去的东西一再不复返,别等到失去的时候,才知道珍惜。

More...

12月25号,不是八国联军侵华的时间!

  今一大早就收到老爸的消息,一张图(下图),大致内容是平安夜是八国联军侵北京的一天,圣诞节Christmas Day是八国联军攻打北京城,火烧圆明园的一天,狂欢节是为了庆祝侵华战争胜利的一天,等等。

12月25号,不是八国联军侵华的时间!

More...

手机App微信支付功能分享。

微信支付

现在的app上如果有售卖的商品基本都会有接入支付系统,正好最近在做的项目中有做到微信支付的功能,再弄的过程中也碰到相应的坑,为了防止以后再次遇到就在本文做个笔记。

本文用到的是 APIcloud 模块操作

在做之前,先仔细的阅读 APIcloudwxPay 官方文档以及微信支付的文档。
APIcloud里的wxPay模块的payOrder的方法地址
微信支付统一下单地址
调起微信支付接口的请求参数列表地址

More...

仿微信朋友圈的九宫格图片。

一般的社交项目都会有图片功能,特别是多图的情况下,九张图布局最常见也用的最多的就是九宫格CELL布局了,但是在前端写代码的时候就很麻烦了,因为你不知道客户选择的图片是多大还是多小的情况下,你是不可以设置高度,这样的设置会导致拉伸图片,变形。所以我们需要换一种思路来做,利用css的 background-image 属性来完成下面的步骤。
这样的好处 :

More...

初级快速理解入门 VUEX

前言
从接触 vue 开始也有一段时间了,一直都是在学习状态,其中也看了视频的实战也看了 vue 的基础使用,但是对于 vue 的状态管理一直不是很理解,对里面的文档概念也很模糊,于是就 vuex 专门细看的官方文档,就自己做的和大部分典型的 TodoList 来做了一个 vuex 的入门,当然本人也算是初级新人,就我自己的角度来解释 vuex 的用法和理解,下面的例子是直接使用的 vuejs 和 vuexjs 来做处理,我认为这样做法的是理解代码最直接最简单的方法,如下有不得当的地方或错误欢迎下面指正。

More...

小程序中实现旅游日历价格和余位显示。

话说也真是好久没上博客更新了呢,这段时间一个也是比较忙着做其他的APP,二也是在自学小程序来把之前做的APP转换成小程序格式,在其中也是遇到了一些问题,在摸索中也会慢慢的去解决去找资料。
废话也不多说,这次要分享的是在项目中部分代码,小程序中的旅游日历的价格和余位显示。
一般的如果是在传统的操作DOM的形式下写日历,然后再插入价格都是比较简单的,但是在小程序中可是没有操作DOM 的说法,而是直接对数据的操作然后动态的改变DOM结构,思路有所不同做法也就不一样了,在想的过程中,有几个思路步骤。

  1. 利用wx:for 来循环创建view 标签作为日历的每一天。
  2. 利用js 在控制日历前面的空格天数,即每个日历开始的时间天数。
  3. 匹配后台发过来的日期月份是多少,自动创建多个月份显示,例如2018-07-20,2018-08-20,2018-10-20,就会显示三个月份,分别是7月、8月和10月。
  4. 在wx:for 循环的时候匹配接受后台发过来的日期时间,然后再给每个日历下添加新的标签text 写上价格和余位。
  5. 之后在组装数据通过this.setData()方法把数据更新
    下面直接上代码:

More...

移动端顶部移动透明度根据滑动高度变化。

滚动透明

在移动端web中有很多应用的场景就是上下滑动页面顶部的 header 会随着滑动的高度而变换透明度,为了让页面内容进来有更多的展示,在这种情况下还是很多见的。
下面来分析一下这里做这效果的简单思路,我们首先要取到 header 的背景色,注意最好是要 rgba 格式的 background ,不然还得要多做一个不必要的颜色转换,然后再通过 getComputedStyle() 方法获取 dom 的样式,获取样式找到 backgroundColor 的 rgba,通过正则匹配找到最后的那个数字 0 ,再就是计算滑动高度和透明度值得函数计算的到新的数值,最后在 touchmove 的时候实时添加给 header 的rgba 上,大致就是这样的。
具体代码如下,本代码参考mui框架做了小的改动处理。

More...

利用overflow:hidden简单布局—左侧固定右侧自适应宽度。

通常我们在布局写页面样式时会做到列表项,比如一个列表是左边有固定图片宽度,右边又是自适应的宽度。那在这时候要去实现这个布局应该怎么做?
一般有以下几种做法:
第一,浮动布局,利用float:left和float:right来实现移动到两边的,但这个做法有问题的是浮动的元素会脱离文档流,没有自身高度。需要解决这问题就需要在这两个的父级元素上加上清除浮动元素clear:both等,而且这样的做法也没有解决自适应的问题,只有知道两个具体的宽度时才可用这个方法。
第二,利用h5的弹性盒子属性,display:flex来实现布局,这个可以做到左边固定右侧自适应的布局,但也是有一点缺点,在低版本的浏览器是不兼容的,这个大都用在移动布局界面上,非常实用。
第三,利用grid布局
第四,利用overflow:hidden布局实现左侧固定右侧自适应,可以适应兼容各浏览器,好用也方便。

More...

用vue写一个简单的todolist。

自学了很久的vue,一直没实用过,自己琢磨写了个简单的 todolist 页面,留着以后看看。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <style>
        .jumbotron{
            width: 600px;
            padding: 20px;
        }
        .panel{
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="app" class="container jumbotron">
        <h1>hello, {{name}}</h1>
        <div class="input-group">
            <input type="text" class="form-control" placeholder="任务的内容" v-model="message">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" @click="add">Go</button>
            </span>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">当前任务为:{{message}}</div>
            <ul class="list-group">
                <li v-if="!listDate" class="list-group-item" v-for="(item, index) in list">
                    {{index+1}}.{{item.text}}
                    <button type="button" class="close" @click="remove(index)">&times;</button>
                </li>
                <li v-if="listDate" class="list-group-item">暂无数据</li>
            </ul>
            <div id="sum" class="panel-footer">任务总计:{{list.length}}</div>
        </div>
    </div>
</body>
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: 'todoList',
            message: '',
            listDate: false,
            list: [
                {
                    text: '声明式渲染'
                },
                {
                    text: '条件预循环'
                },
                {
                    text: '处理用户输入'
                }
            ]
        },
        methods: {
            add: function () {
                this.listDate = false;
                this.list.unshift({text: this.message})
            },
            remove: function (index) {
                this.list.splice(index, 1);
                if(this.list.length === 0){
                    this.listDate = true;
                }
            }
        }
    });
</script>
</html>

也就几句的代码,在vue中做这些数据的事情真是非常方便。