1、关于图片的 mode='widthFix'，小程序的api说这个可以只设置图片的宽度，高度会自适应。
然而发现确实可以，但是图片自带了height:40px;这个属性的执行会比css里面图片自带的height执行慢，能看到一个尴尬的过渡效果。
解决方案：图片设置宽度的时候，加上max-height就好了
2、关于时间戳的问题，后台如果返回了2018-11-14 17:51这样的格式到前台，前台转成了时间戳（13位），在开发者工具里面不会报错，在安卓上也不会报错，
但是在ios就会报错，不能转成时间戳，会是NAN
解决方案：后台直接返回13位的时间戳
3、两次点击操作间隔太快。
解决方案：定义一个变量为0，用当前的时间和变量对比小于1000就停掉。
data:{tapTime:'',canShow:0}
xxx:function(){
if(this.data.canShow){
var nowTime = new Date();
if(nowTime - this.data.tapTime < 1000){
return;
}
this.setData({
tapTime:nowTime;
})
}
}
4、判断两个json数组是否相同
解决方案：json1.sort().toString() === json2.sort().toString()
5、页面超过一屏，显示返回顶部按钮，没有view-scroll
解决方案：
页面.wxml
<view id="container" bindtouchmove="handletouchmove">
内容
</view>
<view class='gotop' wx:if="{{showGoTop}}" bindtap='backToTop'>
<image src='/images/goTop.png'></image>
</view>
页面.js
data:{
showGoTop:false
}
handletouchmove: function () {
app.queryMultipleNodes(this);
},
backToTop: function () {
app.backToTop(this)
},
总的app.js
//获取屏幕滚动出去的高度
queryMultipleNodes: function (self) {
var self = self;
var query = wx.createSelectorQuery()
query.select('#container').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function (res) {
res[0].top // 节点的上边界坐标
//如果顶部的距离超过300 就显示GoTop按钮
if (res[0].top < -300) {
self.setData({
showGoTop: true
})
}
else {
self.setData({
showGoTop: false
})
}
})
},
//返回顶部
backToTop: function (self) {
wx.pageScrollTo({
scrollTop: 0,
duration: 400
});
self.setData({
showGoTop: false
})
},
6、商品列表的懒加载
解决方案：第一屏直接显示（先用一张默认图，设计setTimeout再去加载真正的图片），之后的列表根据距离顶部的距离判断继续加载
app.js：
onLaunch: function (options) {
// 获取系统信息
var that = this;
wx.getSystemInfo({
success: function (res) {
that.globalData.windowHeight = res.windowHeight;
that.globalData.windowWidth = res.windowWidth;
},
})
},
globalData: {
windowWidth:0,
windowHeight:0
}
当前js:
data:{
arr:[],
arrHeight:[],
itemHeight:0,
imageDefault:'/images/goods.png'
},
onLoad: function (options) {
this.GoodsList();
},
GoodsList: function (){
let that = this;
util.axios_notoken(api.GoodsList, { 请求参数}).then(function (res) {
if (res.code == 200) {
//请求之后赋值操作省略
for (var i = 0; i < res.data.list.length; i++) {
that.data.arr.push(false);
}
// 图片加载，延迟1秒执行获取单个图片高度
setTimeout(function () {
that.getRect();
}, 600)
}
})
},
getRect:function(){
let that = this;
// 获取图片节点的高度
wx.createSelectorQuery().select('.item').boundingClientRect(function(rect){
that.setData({
itemHeight:rect.height
})
that.init(rect.height)
}).exec()
},
init: function (itemHeight){
// 获取打开页面未滚动时整屏显示的行数，这屏的图片先加载
let index = parseFloat(app.globalData.windowHeight/itemHeight);
for(let i = 0;i<index;i++){
this.data.arr[i] = true;
}
this.setData({
arr:this.data.arr
})
// 遍历获取每个图片相对于顶部的高度值
for(let i = 0;i<this.data.arr.length;i++){
this.data.arrHeight[i] = Math.floor(i/2)*(itemHeight+10)
}
},
onPageScroll:function(e){
for(var i = 0;i<this.data.arrHeight.length;i++){
if(this.data.arrHeight[i]<e.scrollTop + app.globalData.windowHeight + 200){
if(this.data.arr[i]===false){
this.data.arr[i] = true
}
}
}
this.setData({
arr:this.data.arr
})
},
html：
<navigator hover-class="none" wx:key="id" wx:for="{{goodList}}" url='' class='item px-15 bgfff'>
<image class='mr-15 pull-left good-pic' src='{{arr[index]?item.img:imageDefault}}'></image>
</navigator>