【聊天表情包小程序的开发】之小程序界面的实现

在制作的过程也是在不断优化、不断增加功能的过程，这段时间对小程序的构思还有很多，在完成初步的表情展示和分享后，即目前已上线的小程序的功能后，后续会加上表情收藏、表情制作等功能，大家还有什么好的意见或建议，咱可以一块来实现它。

当博客更新到和小程序同步的时候，我会将其放到git上，方便大家学习调试，现在开放的太早，与博客不同步，可能影响大家观看。

下一步要实现的功能是每个页面的布局和数据显示，问题不是很大，就是在下拉刷新的时候遇到了点困难，好在都已经解决了，下面是/pages/basic/home/index的样式

<scroll-view 
  scroll-y class="scrollPage"
  refresher-enabled="{{true}}"
  refresher-threshold="{{100}}"
  refresher-default-style="white"
  refresher-background="bg-gray"
  refresher-triggered="{{triggered}}"
  bindrefresherpulling="onPulling"
  bindrefresherrefresh="onRefresh"
  bindrefresherrestore="onRestore"
  bindrefresherabort="onAbort"

  lower-threshold="300"
  bindscrolltolower='lower'
>
  <!--<image src='/images/BasicsBg.png' mode='widthFix' class='png' style='width:100%;height:46rpx'></image>-->
  <view class="cu-bar bg-white search">
      <view class="search-form round" style="text-align:center;">
        <text class="cuIcon-search"></text>
        <input type="text" placeholder="搜索表情" confirm-type="search" bindinput="searchIcon" bindtap="gosearch"></input>
      </view>
  </view>
  <!--表情分类-->
  <view class="bg-white nav_padding">
    <view class="grid col-4 text-center">
      <view class="bg-white nav_padding" wx:for="{{classify}}" wx:key="item">
        <view class="bg-gray nav_item" id="{{index}}" bindtap="showGroup" id="{{item.id}}">{{item.title}}</view>
      </view>
    </view>
  </view>
  <view class="bg-white padding">
    <view class="grid col-3 grid-square">
      <view bindtap="showTip" class="bg-img" wx:for="{{picList}}" wx:key="test" id="{{item.id}}" title="{{item.title}}" path="{{item.path}}" style="background-image:url({{item.path}});"></view>
    </view>
  <view class='cu-tabbar-height footer_more'>-- 加载更多 --</view>
  </view>

</scroll-view>

其中的下面这几行是用来实现下拉刷新的，这里着重说下，下面的下拉刷新与官方的有所区别，因为colorui给的基础框架的原因，自定义了下边的导航栏，导致官方的下拉刷新是全局的，不是单个页面组件的，大家注意。

  refresher-enabled="{{true}}"
  refresher-threshold="{{100}}"
  refresher-default-style="white"
  refresher-background="bg-gray"
  refresher-triggered="{{triggered}}"
  bindrefresherpulling="onPulling"
  bindrefresherrefresh="onRefresh"
  bindrefresherrestore="onRestore"
  bindrefresherabort="onAbort"

下面是/pages/component/home/index 的表情包页面，只实现了上拉加载的功能

<scroll-view scroll-y class="scrollPage"

lower-threshold="300"
  bindscrolltolower='lower'
>
  <view class="bg-white padding">
    <view class="grid col-3 margin-bottom text-center">
      <view class="bg-white nav_padding" wx:for="{{picList}}" wx:key="at" id="{{item.id}}" bindtap="golist">
        <image src="{{item.path}}" style="width:250rpx;height:240rpx;"></image>
        <text>{{item.title}}</text>
      </view>
    </view>
  </view>
  
  <view class='cu-tabbar-height footer_more'>-- 加载更多 --</view>
</scroll-view>

最终实现的效果是下面的图中，也可以直接扫码查看并关注小程序，后续所有实现的功能，都会在小程序上面及时查看到

其实目前这个小程序的功能并不太复杂，下一章基本就完成了，到时会把源码附上，希望大家有什么意见或建议可以在这里提出。