小程序开发填坑之路（四）

前言

最近参与俩个小程序项目的开发，遇到的功能有背景图片轮播、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)

  },