前言
最近参与俩个小程序项目的开发,遇到的功能有背景图片轮播、textarea 简介信息填写、页面上下拉刷新等等,其中这前三项印象的问题比较深刻,记录一下。
填过的坑
1、textarea 滑动页面其数据错位
关于小程序的textarea 官方给了说明,说层级最高,而且不能在 scroll-view、swiper、picker-view、movable-view 中使用。关于这些在开发时注意就可以了,但是在实际开发时随着页面的滑动我会发现textarea里面的数据发生了错位(数据不跟着页面滚动),这个是什么原因造成的我也不清楚,但是有解决方案,言简意赅还是看代码的直接。假设这个页面是index:
Index.wxss部分主要代码
page {
height: auto;
}
/* 如果要页面背景的话请这样加 */
.back {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: #000;
}
Index.wxml部分主要代码
<view class='all'>
<textarea placeholder='请输入问题' ></textarea>
</view>
<!—背景独自一个view即可-->
<view class=' back'></view>
2、swiper面板指示点
我在开发过程中遇到一个算不上问题的问题,这个有点特殊,和vue的组件差不多,不好描述看代码一看明了(只针对面板指示点):
这个是不管用的:
<swiper indicator-dots="false" autoplay="true" interval="2500" duration="700">
下面是管用的:
wxml部分
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
js部分
Page({
data:{
indicatorDots: false,
autoplay: true,
interval: 2500,
duration: 700
},
})
3、页面下拉功能页面不返回
在真机测试的时候遇到这个问题,当把页面下拉功能打开,页面下拉后会发现页面不在返回(上边留一块空白区域)。当时API还没有看全,搞了很长时间才解决,其实问题很简单,通常地我们都会在下拉的那个函数里面有一个请求,请求完成之后页面再次返回(空白区域消失),但是现实中空白区域不消失,所以就要在请求完成之后加入一串代码,如下(假设页面叫index):
index.json:
{
"navigationBarTitleText": "INDEX",
"enablePullDownRefresh": true
}
index.js:
onPullDownRefresh: function () {
//假设有个请求
setTimeout(function () {
wx.stopPullDownRefresh();
}, 1000)
},
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}