添加二维数组

var tArray = new Array();  //先声明一维
for(var k=0;k<i;k++){    //一维长度为i,i为变量,可以根据实际情况改变

tArray[k]=new Array(); //声明二维,每一个一维数组里面的一个元素都是一个数组;

for(var j=0;j<p;j++){ //一维数组里面每个元素数组可以包含的数量p,p也是一个变量;

tArray[k][j]=""; //这里将变量初始化,我这边统一初始化为空,后面在用所需的值覆盖里面的值
}
}

JavaScript decodeURI() 函数

定义和用法

decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。

 decodeURI() 对编码后的 URI 进行解码


实例

在本例中,我们将使用 decodeURI() 对一个编码后的 URI 进行解码:


<script type="text/javascript">

var test1="http://www.endige.net/你好/"

document.write(encodeURI(test1)+ "<br />")
document.write(decodeURI(test1))

</script>



输出:


http://www.endige.net/%E4%BD%A0%E5%A5%BD/

http://www.endige.net/你好/

vue.js将unix时间戳转换为自定义时间格式

本方法通过vue.js filter实现将unix时间戳转换为自定义标准时间格式

模板语法(filter)



var vm = new Vue({
    el: '#app',
    data: {
        data:data,
    },
    filters:{
        time: function (value) {//value为13位的时间戳
           // function add0(m) {
            //    return m < 10 ? '0' + m : m
           // }
            //var time = new Date(parseInt(value*1000));
            //var y = time.getFullYear();
           // var m = time.getMonth() + 1;
            //var d = time.getDate();
        var date = new Date(parseInt(value*1000));
        var Y = date.getFullYear(),
        m = date.getMonth() + 1,
        d = date.getDate(),
        H = date.getHours(),
        i = date.getMinutes(),
        s = date.getSeconds();
        if (m &lt; 10) {
        m = '0' + m;
        }
        if (d &lt; 10) {
        d = '0' + d;
        }
        if (H &lt; 10) {
        H = '0' + H;
        }
        if (i &lt; 10) {
        i = '0' + i;
        }
        if (s &lt; 10) {
        s = '0' + s;
        }
         var t = Y+'-'+m+'-'+d+' '+H+':'+i+':'+s; //获取时间格式 2017-01-03 10:13:48
        //var t = Y + '-' + m + '-' + d;    //获取时间格式 2017-01-03
        return t;

        //return y + '.' + add0(m) + '.' + add0(d);
    }
},

})


<!-- html代码 -->
<!-- 在需要转换格式的位置使用名为time的vue.js filter -->
<td>{{tab2.fb1 | time}}</td>


jquery ajax 的几种写法

第一种:

 $.ajax({
        type:"GET",
        url:"php.php",
        data:{php:"100",name:"jquery"},
        success:function(data,str){
        $("div#asd").html(data);
        }
    });

第二种写法:

jQuery.get(url,data,callback,type)
jQuery.post(url,data,callback,type)

参数:
    url 待载入页面的url地址
    data 待发送KEY/VALUE 参数
    callback 载入成功时回调函数
    type 返回格式内容XML HTML SCRIPT JSON TEXT _DEFAULT

类似下面模式
$.ajax({ type: 'POST', url: url, data: data, success: success, dataType: txt});

第三种最简单写法:

jQuery (selector).load(url,data,callback)
$(document).ready(function(){
  $(“button").click(function(){
  $('Div').load(‘php100.php‘,{name:’123’},function(){});
  });
});

php http_build_query() 将数组生成URL查询字符串

php http_build_query()函数的作用是将一个数组转换成url 问号?后面的参数字符串,并且会自动进行urlencode处理。

$data = array(
    'foo'=>'bar', 
    'baz'=>'boom', 
    'site'=>'www.nowamagic.net', 
    'name'=>'nowa magic'); 

echo http_build_query($data);

/* output
foo=bar&baz=boom&cow=milk&php=hypertext+processor
*/




js中const,var,let区别

1.const定义的变量不可以修改,而且必须初始化。

const b = 2;//正确
 // const b;//错误,必须初始化 
console.log('函数外const定义b:' + b);//有输出值
// b = 5;
// console.log('函数外修改const定义b:' + b);//无法输出 
2.var定义的变量可以修改,如果不初始化会输出undefined,不会报错。

var a = 1;
// var a;//不会报错
 console.log('函数外var定义a:' + a);//可以输出a=1
 function change(){
 a = 4;
 console.log('函数内var定义a:' + a);//可以输出a=4
 } 
 change();
 console.log('函数调用后var定义a为函数内部修改值:' + a);//可以输出a=4
3.let是块级作用域,函数内部使用let定义后,对函数外部无影响。

let c = 3;
console.log('函数外let定义c:' + c);//输出c=3
function change(){
let c = 6;
console.log('函数内let定义c:' + c);//输出c=6
} 
change();
console.log('函数调用后let定义c不受函数内部定义影响:' + c);//输出c=3

微信小程序上拉加载,下拉刷新实现方法

微信小程序下拉刷新上拉加载的两种实现方法

方法1

利用”onPullDownRefresh”和”onReachBottom”方法实现小程序下拉刷新上拉加载

设置window中属性enablePullDownRefresh为true
属性 类型 描述
enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数。
设置注册页面中Page中函数
属性 类型 描述
onPullDownRefresh Function 页面相关事件处理函数–监听用户下拉动作
onReachBottom Function 页面上拉触底事件的处理函数
onPullDownRefresh: 下拉刷新说明
  1. 监听用户下拉刷新事件。
  2. 需要在config的window选项中开启enablePullDownRefresh。
  3. 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
  4. 4.
代码示例

代码


onPullDownRefresh(){
console.log('--------下拉刷新-------')
wx.showNavigationBarLoading() //在标题栏中显示加载

wx.request({
url: 'https://URL',
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}
})

方法2

在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序

属性 类型 描述
bindscrolltoupper EventHandle 滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower EventHandle 滚动到底部/右边,会触发 scrolltolower 事件

Wxml文件

<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll">
    <block wx:for="{{goodsList}}" wx:key="item" >
            <view>
                <image src="{{item.goods_img}}" alt=""></image>
            </view>
            <view>{{item.name}}</view>
            <view><text>¥<text>{{item.price}}</text></text><text>¥{{item.oldprice}}</text></view>
   </block>
</scroll-view>

根据官方文档得知,scroll-view就是里面内容有各种滑动触发事件的DIV容器,比如滚动条滚动、触底、触顶着三个事件。

其中的三个属性 
scroll-top:设置滚动条的位置

scroll-y:是否允许竖向滑动,height:是组件的高度

Bindscrolltolower是绑定触底触发的事件

Bindscroll 是滚动触发的时间

Bindscrolltoupper 触顶触发的事件,由于是触顶触发事件,所以不合适用来当做下拉刷新

一般来说 对于组件的属性,都是通过JS来动态控制的。

js

//获取应用实例
var app = getApp()
//首页上拉加载功能函数
var page = 0;
var url = 'https:www.shop.com/home/index/index
';
var GetList = function(that){
  wx.request({
    url: url,
    data: {
        page:page,
    },
    success: function(res){
      var goodsList = that.data.goodsList;
      for(var i = 0;i<res.data.info.length;i++){
          goodsList.push(res.data.info[i]);
      }
      that.setData({
          goodsList:goodsList
      });
      page ++;
      that.setData({
          hidden:true
      });
    }
  });
}
Page({
    data: {
        goodsList:[],
        scrollTop : 0,
        scrollHeight:0,
    },
    //下拉刷新
    onPullDownRefresh:function(){
        this.onLoad()
    },
    onLoad: function () {
         var that = this;
            wx.getSystemInfo({
                success:function(res){
                    that.setData({
                        scrollHeight:res.windowHeight
                    });
                }
            });
        //首页商品
        wx.request({
          url: 'https:www.shop.com/home/product/search',
          data: {},
          method: 'GET',
          success: function(res){
                that.setData({
                goodsList: res.data.info,
            })
          },
        })
},
    //   该方法绑定了页面滑动到底部的事件
    bindDownLoad:function(){
        var that = this;
        GetList(that);
    },
    //   该方法绑定了页面滚动时的事件
    scroll:function(event){
        this.setData({
            scrollTop : event.detail.scrollTop
        });
    },
})

当初次加载页面的时候,执行onLoad函数,

onLoad: function () {
    var that = this;
    wx.getSystemInfo({
        success:function(res){
            that.setData({
                scrollHeight:res.windowHeight
            });
        }
    });
    //首页商品
        wx.request({
          url: 'https:www.shop.com/home/product/search',
          data: {},
          method: 'GET',
          success: function(res){
                that.setData({
                goodsList: res.data.info,
            })
          },
        })
}

这里的onLoad有两个功能

一、获取设备接口用户手机屏幕高度

二、向服务器发送请求,获取数据

其中,wx.getSystemInfo接口可以获取到手机型号、设备像素比、窗口宽度和高度、设备语言、操作系统版本号和客户端平台,最常用的就是获取设备窗口的宽度和高度。

Wx.request()是发送请求,为了保持良好习惯,需要把请求的数据(GET、POST)都要放在data{}中

小程序封装了一个下拉刷新的API,onPullDownRefresh监听下拉事件,所以

onPullDownRefresh:function(){
    this.onLoad()
},

当下拉事件触发的时候,重新执行onLoad()就可以实现刷新效果了

当下拉事件触发的时候,重新执行onLoad()就可以实现刷新效果了

上拉加载

var page = 0;
var url = app.globalData.domain+'/index.php';
var GetList = function(that){
  that.setData({
      hidden : false
  });
  wx.request({
    url: url,
    data: {
        page:page,
    },
    success: function(res){
      var goodsList = that.data.goodsList;
      for(var i = 0;i<res.data.info.length;i++){
          goodsList.push(res.data.info[i]);
      }
      that.setData({
          goodsList:goodsList
      });
      page ++;
      that.setData({
          hidden:true
      });
    }
  });  
}
//   该方法绑定了页面滑动到底部的事件
bindDownLoad:function(){
    var that = this;
    GetList(that);
},
//   该方法绑定了页面滚动时的事件
scroll:function(event){
    this.setData({
        scrollTop : event.detail.scrollTop
    });
},

bindDownLoad:每次触底都会触发GetList,去获取数据

Scroll:每次滚动的时候,都重新设置滚动条的位置

var page = 0; 设置当前所请求的页数,这里我请求的方式类似于分别请求

url 请求的url

var GetList = function(){}; 是JS中设置函数的一种方式,先设置一个匿名函数,然后将这个匿名函数赋值给GetList这个变量,相当于这个变量代表了这个函数

wx.request() 发送请求

success 请求成功以后,对数据进行操作

var goodsList = that.data.goodsList; that是调用函数的时候,传递过来的,是this,代表当前页面Page()的实例化对象

that.data.goodsList 就是获取当前goodsList的值

每次执行这个函数的时候,都会page++,然后根据这个page的值去服务器获取数据,将新得到的数据,通过循环push,添加到这个goodsList,然后再通过that.setData覆盖掉原来的goodsList,这样Page中的goodsList就是最新的数据,可以展现在前端页面了。

下拉刷新: 
1.触底,触发时间 
2.调用函数,获取数据 
3.将数据添加到所在页面js中

后端PHP代码:

public function index(){
    $page = I('get.page')?I('get.page'):0;
    $goods_list = D('Goods')->where(array('status'=>1))->limit($page*10,'10')->order('id desc')->select();
    $this->success($goods_list,'',true);
}


微信小程序-原生下拉刷新

小程序中的json文件是配置文件,用来配置小程序页面.

app.json

是对整个小程序的全局配置,我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。

page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

app.json
{
  "pages": [
    //注册小程序中的页面
  ],
  "window": {
    //设置小程序的状态栏、导航条、标题、窗口背景色
  },
  "tabBar": {
    //指定 tab 栏的表现,以及 tab 切换时显示的对应页面
  },
  "networkTimeout": {
    //设置各种网络请求的超时时间
  },
  "debug": true//可以在开发者工具中开启 debug 模式
}


page.json//page.json相当于app.json中的window
{
  "navigationBarBackgroundColor": "#ffffff",//导航栏背景颜色
  "navigationBarTextStyle": "black",//导航栏标题颜色,仅支持 black/white
  "navigationBarTitleText": "微信接口功能演示",//导航栏标题文字内容
  "backgroundColor": "#eeeeee",//窗口的背景色
  "backgroundTextStyle": "light"//下拉背景字体、loading 图的样式,仅支持 dark/light
  "enablePullDownRefresh": true//是否开启下拉刷新
  "disableScroll": false//设置为 true 则页面整体不能上下滚动;只在 page.json 中有效,无法在 app.json 中设置该项
}


下拉刷新

  1. 在json文件中配置enablePullDownRefresh为true(app.json中在window中设置enablePullDownRefresh,此效果作用于全局),下面两种设置方法只写一个就行了
app.json
{
 "window": {
   "enablePullDownRefresh":true
 },
}


page.json
{
  "enablePullDownRefresh": true
}
在js文件中实现onPullDownRefresh方法,在网络请求完成后调用wx.stopPullDownRefresh()来结束下拉刷新




page.js
Page({
 onPullDownRefresh: function(){
     console.log('--------下拉刷新-------')
   wx.showNavigationBarLoading() //在标题栏中显示加载
     wx.request({
         url: '',
         data: {},
         method: 'GET',
         success: function (res) {},
         fail: function (res) {},
         complete: function (res) {
             // complete
            wx.hideNavigationBarLoading() //完成停止加载
            wx.stopPullDownRefresh() //停止下拉刷新
         }
     })
 }
})



bug处理

在使用时遇到了一个bug,下拉时的三个圆点没有显示

原因

分析之后发现是因为圆点的颜色与背景色一样,影响了显示

处理方法

在json文件中配置backgroundTextStyle来设置下拉背景字体、loading 图的样式为dark

app.json
{
  "window": {
    "backgroundTextStyle": "dark"
  },
}
pags.json
{
  "backgroundTextStyle": "dark"
}