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

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

当博客更新到和小程序同步的时候，我会将其放到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>

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

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

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

独立表情包壁纸喝酒神器功能微信小程序源码
独立表情包壁纸喝酒神器功能微信小程序源码相信玩小程序的朋友应该对这个小程序不陌生这是上半年很火的微信表情小程序功能之前的版本内置了表情符号和壁纸功能本期版本优化了UI,增加了一些新的喝酒神器. ...
程序员开发什么小程序挣钱_作为程序员赚钱的5种独特方式
程序员开发什么小程序挣钱 1.赚钱报告错误 (1. Make money reporting bugs) You can earn money by helping other companies f ...
小程序云开发搜索功能的实现正则_码code | 如何借助小程序云开发实现小程序支付功能...
转载来源:编程小石头我们在做小程序支付相关的开发时,总会遇到这些难题.小程序调用微信支付时,必须要有自己的服务器,有自己的备案域名,有自己的后台开发.这就导致我们做小程序支付时的成本很大. 本节就来 ...
微信小程序中开发的小坑
微信小程序中开发的小坑本文随时更新微信小程序开发过程中遇到的小坑.现已收集如下. 微信小程序编译后的大小不能超过1MB. 微信小程序不能建立两个(含)以上的WebStock连接.
小程序云开发_小程序开发进入云原生时代加速构建开发者生态
2019-11-07 16:44 作为Serverless理念大规模落地的最佳实践,"小程序·云开发"正受到越来越多的关注. 11月7日,在腾讯Techo开发者大会"小程 ...
10行代码实现微信小程序支付功能，使用小程序云开发实现小程序支付功能（含源码
前面给大家讲过一个借助小程序云开发实现微信支付的,但是那个操作稍微有点繁琐,并且还会经常出现问题,今天就给大家讲一个简单的,并且借助官方支付api实现小程序支付功能. 传送门借助小程序云开发实现小程 ...
PHP程序员开发win32应用程序之梦
相信做纯WEB开发的PHP程序员都会想过,要是PHP能开发windows本地应用程序多好,于是上网一查找出来的很多都是"PHP-GTK"的老文章,这东西好像已经没人维护了,随便看了 ...
【聊天表情包小程序的开发】之开发简介
最近业余时间比较充裕,思来想去,就想做一个已经很火的小程序,之前只是偶尔了解过小程序的开发,并没有具体的去了解开发细节,也算是个开发小程序的小白,那么就让我们从头开始学习如何开发一个属于我们自己的小程 ...
流量主系列|独立表情包壁纸喝酒神器功能微信小程序源码
简介: 相信玩小程序的朋友对这款小程序应该也不陌生, 这是前半年很火的一款微信表情包小程序功能. 之前的版本内置了表情包还有壁纸功能 ,这一期的版本给优化了一下UI和新增加了一些喝酒神器功能具 ...

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

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

最新文章

热门文章