欢迎光临
我们一直在努力

小程序(九)小程序公用页面的添加和使用

样式小程序(九)顶部轮播图和底部Tabbar样式,操作


阅读本文前,请您先点击上面的蓝色字体“程序职场”关注后再点击 星标 公众号,这样您就可以收到最优质的文章了。每周都有分享



大家好,我是“追梦蜗牛”,大家可以在公众号后台回复 “Java资料”获得技能提升的资料,绝对是干货。

本文是小程序系列的第十篇,了解前面的文章有助于更好的理解本文:


1. 小程序(一)介绍

2. 小程序(二)appID获取和项目目录结构

3. 小程序(三)生命周期

4. 小程序(四)开发调试方式和真机调试

5. 小程序(五)创建第一个项目

6. 小程序(六)选项卡切换和数据绑定,数据存储

7. 小程序(七)网络通讯和数据解析

8. 小程序(八)列表展示,数据传递,页面跳转
9. 小程序(九)顶部轮播图和底部TabBar样式


前言

一,添加公用部分

二,使用公共部分

上篇文章为大家讲述了小程序 顶部轮播图和底部TanBar样式;本篇文章接着上篇内容继续为大家介绍小程序的新功能 加载更多的公共的写法

一,添加公用部分

小程序开发中为了避免 一样的东西重复写,照成冗余,我们提倡一样的界面做成公用部分,在使用的地方引用后使用。

我们就以数据列表 底部的加载更多为例,来实现调用公用部分。

1. 添加目录

添加底部加载更多的公用部分 ,我这里添加目录refreshFooter

2. 添加Page,文件名字是 refreshFooter ,自动生成 四个文件(js,json,wxml,wxss),并且文件名字都是 refreshFooter。
如下图:

#js文件内容

// pages/refreshFooter/refreshFooter.jsComponent({ /** * 组件的属性列表 */ properties: {
  }, /** * 组件的初始数据 */ data: { refreshState: 0,// 0 闲置状态 1 正在刷新中的状态 2 没有更多的数据了  }, /** * 组件的方法列表 */ methods: { updateUI: function (refreshState) { this.setData({ refreshState: refreshState }) }, }})

1. 组件的初识数据
2. 组件的方法,页面更新

#json文件

{ "component": true, "usingComponents": {}}


#wxml文件

<!--pages/refreshFooter/refreshFooter.wxml--><view class="weui-loadmore" hidden="{{refreshState == 0 || refreshState == 2}}"> <view class="weui-loading"></view> <view class="weui-loadmore__tips">正在加载</view></view>
<view class="weui-loadmore" hidden="{{refreshState == 0 || refreshState == 1}}"> <view class="weui-loadmore__tips">没有更多数据了</view></view>

添加加载更多和正在加载的界面效果

#wxss文件

/* pages/refreshFooter/refreshFooter.wxss */.weui-loading { margin: 0 5px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; -webkit-animation: weuiLoading 1s steps(12, end) infinite; animation: weuiLoading 1s steps(12, end) infinite; background-size: 100%;}.weui-loadmore { width: 65%; margin: 1.5em auto; line-height: 1.6em; font-size: 14px; text-align: center;}.weui-loadmore__tips { display: inline-block; vertical-align: middle;}

样式的添加。

通过上面的实现,我们基本完成的公用部分的效果。下面我们做调用公共部分。

二,使用公共部分

按照上面的原理 我们新建 一个目录index,并且添加index page生成 四个文件来做功能实现.

#js文件的添加

//index.jsimport net from '../../utils/util.js';
Page({ /** * 页面的初始数据 */ data: { page: 0, totalPages: 0, projects: [ { _id: 1, title: "小程序已成为微信生态内的红利聚集地小程序已成为微信生态内的红利聚集地,各种场景核心功能,一键生成小程序,提前布局微信新生态,抢占第一波红利.", }, { _id: 2, title: "小程序已成为微信生态内的红利聚集地小程序已成为微信生态内的红利聚集地各种场景核心功能,一键生成小程序,提前布局微信新生态,抢占第一波红利.", }, { _id: 3, title: "小程序已成为微信生态内的红利聚集地小程序已成为微信生态内的红利聚集地各种场景核心功能,一键生成小程序,提前布局微信新生态,抢占第一波红利.", }, { _id: 4, title: "小程序已成为微信生态内的红利聚集地小程序已成为微信生态内的红利聚集地各种场景核心功能,一键生成小程序,提前布局微信新生态,抢占第一波红利.", }, { _id: 5, title: "小程序已成为微信生态内的红利聚集地小程序已成为微信生态内的红利聚集地各种场景核心功能,一键生成小程序,提前布局微信新生态,抢占第一波红利.", }, { _id: 6, title: "小程序已成为微信生态内的红利聚集地小程序已成为微信生态内的红利聚集地各种场景核心功能,一键生成小程序,提前布局微信新生态,抢占第一波红利.", }, { _id: 7, title: "小程序已成为微信生态内的红利聚集地小程序已成为微信生态内的红利聚集地各种场景核心功能,一键生成小程序,提前布局微信新生态,抢占第一波红利.", } ] },
loadData: function () { this.data.page = 0; // this.fetchData().then(res => { wx.stopPullDownRefresh() // })
// wx.hideLoading() },
loadMoreData: function () { this.data.page = this.data.page + 1; return this.fetchData() },
fetchData: function () { let _this = this _this.setData({ projects: _this.data.projects, })
wx.hideLoading() },
toProjectDetailPage: function (e) { },
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // wx.startPullDownRefresh({}) },
/** * 生命周期函数--监听页面显示 */ onShow: function () { this.loadData() },
/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { wx.showLoading({ title: '加载中', }) this.loadData() },
/** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { let refreshFooter = this.selectComponent('#refreshFooter'); if (this.data.page + 1 == this.data.totalPages) { refreshFooter.updateUI(2) } else { refreshFooter.updateUI(1) this.loadMoreData().then(res => { refreshFooter.updateUI(2) }) } },})

1. 添加静态数据数组 projects
2. 定义页面大小 page 和总页码 totalPages
3. 添加加载跟多数据函数 fetchData
4. 上拉和下拉监听事件的 添加
onPullDownRefresh,onReachBottom5. onReachBottom 中添加公共组件的调用

#json文件的添加

{ "usingComponents": { "refresh-footer": "../refreshFooter/refreshFooter" }, "enablePullDownRefresh": true, "navigationBarTitleText": "公用模块"}

#wxml文件的添加

<!--index.wxml--><!--pages/projectList/projectList.wxml--><view class='cell'  wx:for="{{projects}}"  wx:key="{{index}}" bindtap='toProjectDetailPage' data-orderId="{{item.id}}"> <!-- <project-cell name="{{item.name}}" content="{{item.content}}" item="{{item}}"></project-cell> --> <view>      <text class='cell-title' style='color: #353f41;'>{{item.title}}</text>    </view></view><refresh-footer id="refreshFooter"></refresh-footer>

1. 添加一个列表展示
2. 添加 调用 公共组件 

<refresh-footer id="refreshFooter"></refresh-footer>

#wxss文件的添加

/**index.wxss**//* pages/projectList/projectList.wxss */
.cell { border-bottom: solid 2rpx #d5e5ec;}

运行项目:


好了 到这里列表加载更多 公用写法,基本都说完了,如果小伙伴还有疑问,可以 公众号 加群,我们一起进步


本案例下载地址:

https://github.com/ProceduralZC/WX/tree/master/wxpublic



– End –

长按二维码关注

期待您的加入


近期推荐阅读:

职场我们如何寻找自己的定位?

IT项目开发流程

怎样才能算自由者?

频繁跳槽会有什么不好的影响?

资源整理:
包括不限于Java、Python、Linux、前端、人工智能、架构、大数据、电子书 ,移动端,小程序,项目等

喜欢就点个“在看”呗^_^

赞(0) 打赏
未经允许不得转载:小程序营销网 » 小程序(九)小程序公用页面的添加和使用
分享到: 更多 (0)

小程序营销网

联系我们立即定制