1.添加点击效果
cursor: pointer
2.js数组的push与concat区别
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
var a = [1,2,3,4];
a.push(5); //a 现在是1,2,3,4,5
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
var a = [1,2,3,4];
var b = [5,6];
var c = a.concat(b); // a,b 数组都不变，c变成了1,2,3,4,5,6
3.保留小数点后几位小数
方法很简单.toFixed()即可.括号内的数字表示保留的位数.如果是整数,就会不上0
num.toFixed(2)
4. 只能输入字母和数组正则
var checkStr = /^[A-Za-z0-9]+$/;
var isValue = checkStr.test(value)
5.button去边框
button::after{
border: none;
}
6.js数组与字符串的相互转换方法
(1).数组转字符串
需要将数组元素用某个字符连接成字符串，示例代码如下：
var a, b;
a = new Array(0,1,2,3,4);
b = a.join("-");
(2).字符串转数组
实现方法为将字符串按某个字符切割成若干个字符串，并以数组形式返回，示例代码如下：
var s = "abc,abcd,aaa";
ss = s.split(",");// 在每个逗号(,)处进行分解。
7.获取上一页面，改变属性值
var pages = getCurrentPages()
var prevPage = pages[pages.length - 2]
prevPage.setData({
pageName: 'openPage',
orderNumber: res.data.data.orderNumber
})
8.微信小程序 事件冒泡,bandtap,catchtap事件绑定
<view class="view1" bindtap="view1">
<view class="view2" bindtap="view2">
<view class="view3" catchtap="view3"></view>
</view>
</view>
9.上传多张图片
chooseImage: function () {
var that = this
wx.chooseImage({
sourceType: sourceType[this.data.sourceTypeIndex],
sizeType: sizeType[this.data.sizeTypeIndex],
count: this.data.count[this.data.countIndex],
success: function (res) {
console.log(res)
var tempFilePaths = res.tempFilePaths
var successUp = 0; //成功个数
var failUp = 0; //失败个数
var length = res.tempFilePaths.length; //总共个数
var i = 0; //第几个
that.uploadDIY(res.tempFilePaths, successUp, failUp, i, length);
}
})
},
uploadDIY: function(filePaths, successUp, failUp, i, length) {
var that = this
wx.uploadFile({
url: 'https://yinghao.yoolin.cc/upload/uploadPicture',
filePath: filePaths[i],
name: 'upfile',
formData: {},
success: (resp) => {
var data = resp.data
var json = JSON.parse(data);
successUp++;
console.log('第' + successUp + '张，url:', json.url)
that.data.imgs.push(json.url)
var urlStr = '/user/imgAdd'
var parameters = {
token: that.data.userInfo.token,
url: json.url
}
util.request(urlStr, parameters, function (res) {
console.log('照片墙里面添加图片：', res)
var imageList = that.data.imageList
imageList.push(res.data.data)
that.setData({
imageList: imageList
})
// that.getImageList()
that.data.userInfo.imgs = that.data.imgs
});
},
fail: (res) => {
failUp++;
},
complete: () => {
i++;
if (i == length) {
console.log('总共' + successUp + '张上传成功,' + failUp + '张上传失败！')
console.log('图片集：',that.data.imgs)
}
else { //递归调用uploadDIY函数
that.uploadDIY(filePaths, successUp, failUp, i, length);
}
},
});
},
10.JS 对象(Object)和字符串(String)互转方法
利用原生JSON对象，将对象转为字符串
var jsObj = {};
jsObj.testArray = [1,2,3,4,5];
jsObj.name = 'CSS3';
jsObj.date = '8 May, 2011';
var str = JSON.stringify(jsObj);
alert(str);
从JSON字符串转为对象
var jsObj = {};
jsObj.testArray = [1,2,3,4,5];
jsObj.name = 'CSS3';
jsObj.date = '8 May, 2011';
var str = JSON.stringify(jsObj);
var str1 = JSON.parse(str);
alert(str1);
11.js前端实现模糊查询
//字符串方法indexOf
var len = list.length;
var arr = [];
for(var i=0;i<len;i++){
//如果字符串中不包含目标字符会返回-1
if(list[i].indexOf(keyWord)>=0){
arr.push(list[i]);
}
}
return arr;
//正则表达式
var len = list.length;
var arr = [];
var reg = new RegExp(keyWord);
for(var i=0;i<len;i++){
//如果字符串中不包含目标字符会返回-1
if(list[i].match(reg)){
arr.push(list[i]);
}
}
return arr;
12.微信小程序--在wxml中设置保留小数位数
需要新建一个wxs文件
var filters = {
toFix: function (value) {
return value.toFixed(2)//此处2为保留两位小数
}
}
module.exports = {
toFix: filters.toFix
}
在wxml文件中引入
<wxs module="filters" src="../addmul.wxs"></wxs>
修改
<view class="price" wx:if="{{item.num > 0}}">
<span>￥{{item.price*item.num}}</span>
</view>
为
<view class="price" wx:if="{{item.num > 0}}">
<span>￥{{filters.toFix(item.price*item.num)}}</span>
</view>
13.千位分隔符
function thousandBitSeparator(num) {
let DIGIT_PATTERN = /(^|\s)\d+(?=\.?\d*($|\s))/g
let MILI_PATTERN = /(?=(?!\b)(\d{3})+\.?\b)/g
return num && num.toString()
.replace(DIGIT_PATTERN, (m) => m.replace(MILI_PATTERN, ','))
}
14.scroll-view 根据内容的高度自适应
wx.getSystemInfo({
success: function (res) {
wx.createSelectorQuery().select('#map').boundingClientRect(function (rect) {
var is_1_height = Number(rect.height) // 节点的宽度
that.setData({
scrollHeight: Number(res.windowHeight) - is_1_height
});
}).exec();
}
});
15.text限定行数
.bottom_content_text1 {
overflow:hidden;
text-overflow:ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
display: -webkit-box;
/* white-space:nowrap; */
}
