记录开发过程中遇到的问题及通过自己摸索或查阅网上的教程整理出的解决方案，如有不全或者错误欢迎留言更正
目录
1.css 匹配下标是奇数或偶数的子元素
2.获取屏幕高度
3.小程序tabbar显示不出的原因
4.小程序状态栏沉浸式
5.小程序引用iconfont图标
6.wx.request回调中使用setDate改变page.data值
7.margin：0 auto 无效原因
8.小程序传递数组，对象
9.小程序阻止冒泡
10.数组拼接
正文
1.css 匹配下标是奇数或偶数的子元素
.item-order:nth-of-type(odd){
border-left:3px solid #f5f5f5;
//奇数
}
.item-order:nth-of-type(even){
border-right:3px solid #f5f5f5;
//偶数
}
2.获取屏幕高度
获取览器显示区域的高度： $(window).height();
获取浏览器显示区域的宽度：$(window).width();
获取页面的文档高度：$(document).height();
获取页面的文档宽度：$(document).width();
获取滚动条到顶部的垂直高度：(window).scrollTop();
获取滚动条到左边的垂直宽度：(window).scrollLeft();
传送门1
传送门2
3.小程序tabbar显示不出的原因
pages数组的第一项必须是tabBar的list数组的一员
"pages":[
"pages/clickDemo/clickDemo",
"pages/logs/logs",
"pages/index/index",
"pages/mypage/mypage"
]
tabbar中list数组内容是：
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "image/location_normal.png",
"selectedIconPath": "image/location_selected.png"
},
{
"pagePath": "pages/logs/logs",
"text": "设置",
"iconPath": "image/setting_normal.png",
"selectedIconPath": "image/setting_selecred.png"
}
如果不是自定义的tabbar, custom为true也会显示不出来，这个是笔者个人粗心犯得小错误，找了半天.....
4.小程序状态栏沉浸式
app.json 中 window 配置：navigationStyle:"custom"
5.小程序引用iconfont图标
1.在阿里图标库中找到需要的图标并加入项目
2.把项目下载项目到本地
3.在本地打开下载的目录将 iconfont.css文件改为iconfont.wxss复制到项目中
4.在app.wxss中引入iconfont.wxss
5.在阿里图标库我的项目中 点击复制代码
6.将复制的@font-face替换掉iconfont.wxss中的@font-face
7.在项目中引用
详细教程点击传送门
6.wx.request回调中使用setDate改变page.data值
Page({
data: {
A:'true',
},
onShow:function (){
var that = this;
wx.request({
url:'XXXX',
method:'GET',
success(d){
if(d.statusCode){
that.setData({
A: d.data.A
})
}
},
fail(e){
console.log(e)
}
})
},
})
在request之前先用个变量把this存起来，在success里就用这个变量来代量this使用，
原因是：在request里的this上下文改变了，this不再指向当前page
7.margin：0 auto 无效原因
说道居中很多前端开发的小伙伴都会想到margin:0 auto ，前段时间在使用时却没有效果，经过查询得知,需配合display:block使用才有效果
margin: 0 auto,
display:block
8.小程序传递数组，对象
思路： 先把要传递的对象数组通过JSON.stingify方法,将对象转换成字符串后传递
在接收时将字符串转换成对象
click:function(e){
var model = JSON.stringify(e.currentTarget.dataset.model);
wx.navigateTo({
url: '../detail/detail?model=' + model,
})
}
onLoad: function (options) {
//将字符串转换成对象
var bean = JSON.parse(options.model);
if(options.model == null){
wx.showToast({
title: '数据为空',
})
return;
}
this.setData({
model:bean
})
}
方式和传递对象相同，注意类型即可
详细攻略点击传送门
9.小程序阻止冒泡
很简单，直接把bind 改成 catch即可，例如 bindtap 改成 catchtap
友情提示：有一部分标签是默认在最上层的，比如video，想在video上放一个view然后设置catchtap将video覆盖是无效的
详细攻略点击传送门
10.数组拼接concat
var a1 = ['aa',12,13];
var a2 = [21,22,23];
var newA = a1.concat(a2) // ['aa',12,13,21,22,23]