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

前言

前几日编写小程序页面时遇到两个平时没有注意的问题，虽然问题很简答但是相比之下还是需要记录一下。

填过的坑

1、textarea数据录入（数据库）后显示的问题。

这个问题可不是textarae数据错位问题，错位的问题已经在小程序开发填坑之路（四）中有所解答，这里要说的是我们把textarae的数据录入到数据库中之后查询显示的问题，其实这里举个栗子就可以了。

栗子：说js文件data里面有一个叫content的对象，这里面的内容就是数据库查询出来的textarae的数据（有换行符一些东西），然后wxml文件里要渲染content，其中<view>{{content}}</view>是不对的，这样数据不会渲染换行的，然而像<view><text>{{content}}</text></view>就可以成功的显示换行。

一句话就是要渲染的<textarae>内容要求保持一致就要用<text>。

2、背景跟着内容滑动而滑动

       其实这个问题在网页开发中很常见，但是在小程序中出现是头一次，所以记录一下，嘻嘻。先看一下实际效果：（这还是一个半成品，所以有些在粗糙）

实际上它的wxml结构是这样子的：（直接上源代码吧还是）

<view class="root-bd">

  <image class="bg-img" mode="widthFix" src="images/bg.png"></image>

  <view class="main">

    <view class="slogan">宝宝的成长，需要妈妈的陪伴</view>

    <view class="levels">

      <view wx:for="{{6}}" wx:key="{{index}}" class="item {{index%2==0?'item-left':'item-right'}}">

        <view class="top {{'top-border'+(index+1)}}">

          <image class="img-b-close" src="{{'images/book'+(index+1)+'.png'}}"></image>

        </view>

        <view class="bot">0/104</view>

      </view>

    </view>

  </view>

</view>

然后wxss里面是这样的：

page {

  box-sizing: border-box;

  display: flex;

  align-items: stretch;

  justify-content: flex-start;

  flex-direction: column;

  height: 100%;

  width: 100%;

  padding-bottom: var(--tabbar-height);

}



.root-bd {

  flex-grow: 1;

  position: relative;

  overflow: scroll;

}

.root-bd .bg-img{

  width: 100%;

}



.root-bd .main{

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  padding: 20rpx 40rpx;

}

/* 最上方标语  */

.main .slogan{

  display: flex;

  align-items: center;

  height: 26rpx;

  font-size: 24rpx;

  color: #5C5C5C;

  padding: 0 0 2rpx 14rpx;

  border-left: 14rpx solid #F9B51C;

}

.main .levels{

  width: 100%;

  display: flex;

  align-items: center;

  flex-flow: column;

  /*日后需要修改  */

  margin-top: 140rpx;

}

.levels .item{

  width: 542rpx;

  display: flex;

  flex-flow: column;

}

.levels .item-left{

  /* justify-content: flex-start; */

  align-items: flex-start;

}

.levels .item-right{

  /* justify-content: flex-end; */

  align-items: flex-end;

}

.item .top{

  display: flex;

  justify-content: center;

  align-items: center;

  box-sizing: content-box;

  border-radius: 50%;

  width: 164rpx;

  height: 164rpx;

  background: #fff;

  overflow: visible;

  border: 14rpx solid #5C5C5C;

}

.item .top .img-b-close{

  width: 106rpx;

  height: 140rpx;

}

.item .top .img-b-open{

  width: 174rpx;

  height: 140rpx;

}

.item .bot{

  display: flex;

  box-sizing: border-box;

  width: 192rpx;

  color: #fff;

  justify-content: center;

  font-size: 34rpx;

  margin-top: 16rpx;

}

/*边框颜色  */

.item .top-border1{

  border: 14rpx solid #FFD94F;

}

.item .top-border2{

  border: 14rpx solid #8EE03E;

}

.item .top-border3{

  border: 14rpx solid #97BAFB;

}

.item .top-border4{

  border: 14rpx solid #FE9205;

}

.item .top-border5{

  border: 14rpx solid #E8372E;

}

.item .top-border6{

  border: 14rpx solid #39AFE2;

}

其实这个就是绝对布局的运用，这样就能使得背景跟着内容滑动而滑动。