小程序踩过的坑-合集

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>

 

 

posted @ 2018-11-14 17:51  夏天的鱼呀  阅读(378)  评论(0)    收藏  举报