前言，学期分析报告是本项目的重点展示区间，通过对学生行为数据的分析，我们能预测学生成绩并预测学习排名，我们将会对学生一学期的行为数据进行统计分析和展示，并预测学期排名，根据学生的行为和预测成绩提出委婉适当的建议。 界面功能需求
展示学生的学期总支出情况，食堂支出情况，并查看学生食堂消费水平处于年级什么水平。展示学生一学期前往图书馆的次数，图书借阅次数，以及两项指标相对于年级平均水平的位置。展示学生前两学期的成绩排名，并预测当前学期成绩排名，排名数据来源于算法小组的预测。根据学生的行为数据，成绩排名，给出委婉的建议，当学生成绩排名位于年级前15%我们将建议其继续保持良好习惯，当学生成绩排名位于年级后15%，我们根据其图书借阅数据，和食堂数据进行分析，并提醒其在哪方面进行加强，并培养良好的学习习惯。当排名位于中间时，为促进学生用户的学习进步，我们会给出对应的建议。对于学期报告，我们将采用滑动界面布局在一个界面展示长篇幅学期报告。 大体思路是利用一个boxs容器，里面装有不同类型的box-wrapper 来展示不同方面的学期报告。对boxs增添滑动和触底事件响应。来进行box-wrapper的加载。 每一个box-wrapper包裹背景图片模块，内容信息模块和保存图片模块 下面为主要的wxss代码 boxs容器，将其position设置为absolute。
.boxs { width: 100%; height: 100%; position: absolute; }其中一个box-wrapper的wxss代码 要注意图片地址要使用http格式而不是本地模式。能有效节省小程序占用空间，提高空间利用率，同时避免了小程序里的一些bug（在某些组件或者容器里不能使用本地图片，必须使用http格式图片。推荐使用http.sm.sm 的图片网络地址链接生成网站。）
.box1-wrapper{ background-image: url(https://i.loli.net/2020/06/29/5yjpkZOdzDP7QEM.jpg); padding-top: 174rpx; padding-bottom: 550rpx; background-repeat: no-repeat; background-size: 100% 80%; }关于保存图片模块的wxss代码
.tips { margin-top: 50rpx; text-align: center; } .tips .saveBtn { background: #FF6666; border-radius: 30rpx; padding: 12rpx 60rpx; color: white; font-size: 28rpx; } .tips .info{ opacity: 0.8; font-size: x-small; margin-top: 25rpx; }学期报告的主界面布局wxml代码，只展示了其中一个box-wrapper布局。
<view class="boxs" catchtouchmove="noneEnoughPeople"> <view bindtouchstart="handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend"> <view class="box1-wrapper"> </view> <view class="box2">亲爱的同学，过去的这一学期，相信你一定过得愉快而又充实</view> <view class='box2'>这一学期，你的总支出为：</view> <view class='box3'>￥{{Totalcost}}</view> <view class='box2'>良好的生活习惯会更有助于你的学习，我们提倡少吃外卖</view> <view class='box2'>而这一学期，你在食堂的消费共</view> <view class='box3'>￥{{cafeprice}}</view> <view class='box2'>超过</view> <view class='box3'>{{cafepercente}}</view> <view class='box2'>的同学</view> <view class="tips"> <text class="saveBtn" bindtap="saveShareImg">保存图片</text> <view class="info">保存到相册可在朋友圈分享海报</view> </view>界面的逻辑代码和数据 该界面的巧妙设计就在于滑动界面的设计，也就是当往下滑动时，通过事件响应和位置计算，来判断界面是向上还是向下滑动，从而显示顺滑的长篇幅界面展示效果。 逻辑代码：
noneEnoughPeople() { //禁止页面滑动的方法，可以不做任何操作，但是必须要写 }, //滑动开始的操作，记录滑动开始的位置，用于判断是向上滑动还是向下滑动 handletouchtart: function(event) { // 赋值 this.data.lastY = event.touches[0].pageY }, //滑动中，判断是向上还是向下 handletouchmove(event) { let currentY = event.touches[0].pageY; let ty = currentY - this.data.lastY; if (ty < 0) { this.setData({ text: '向上' }) } else { this.setData({ text: '向下' }) } this.data.lastY = currentY }, //滑动结束，通过判断是向上还是向下来计算页面滚动的位置 handletouchend(event) { console.log(this.data.text, this.data.page) if (this.data.text == '向上') { if (this.data.page == 1) { wx.pageScrollTo({ scrollTop: wx.getSystemInfoSync().windowHeight, duration: 500 }) this.setData({ page: 2 }) } else if (this.data.page == 2) { wx.pageScrollTo({ scrollTop: wx.getSystemInfoSync().windowHeight * 2, duration: 500 }) this.setData({ page: 3 }) } else if (this.data.page == 3) { wx.pageScrollTo({ scrollTop: wx.getSystemInfoSync().windowHeight * 3, duration: 500 }) this.setData({ page:4 }) } } else { if (this.data.page == 2) { wx.pageScrollTo({ scrollTop: 0, duration: 500 }) this.setData({ page: 1 }) } else if (this.data.page == 3) { wx.pageScrollTo({ scrollTop: wx.getSystemInfoSync().windowHeight, duration: 500 }) this.setData({ page: 2 }) } else if (this.data.page == 4) { wx.pageScrollTo({ scrollTop: wx.getSystemInfoSync().windowHeight * 2, duration: 500 }) this.setData({ page: 3 }) } } },数据
data: { //消费数据，数据库获取 Totalcost: "10000",//总支出,数据库获取 cafeprice:"100",//食堂花费，数据库获取 cafeovflow: "超过",//取值为 超过或者低于，从数据库获取。 cafepercente:"64.3",//取值为百分比，数据库获取 //图书馆数据，数据库接口获取 counttimeLib:"10",//去图书馆次数 OverflowLib1:"超过",//次数 percentLib1:"90",//超过百分比，次数 countbookLib:"100",//借书次数 OverflowLib2:"超过",//借书数量 percentLib2:"90",//超过百分比，借书数量 //成绩数据，数据库接口获取 firstyearRank:"100",//第一学期排名 secondyearRank:"90",//第二学期排名 currentRank:"90",//预测的期末排名 },通过onshow功能接入组员提供的数据接口，在前端界面中加载数据。
基本完成预定目标，但存在两个瑕疵
1.数据分析不够饱满， 是因为我们小组获取到学生行为数据不够丰富，后续可以寻找更加丰富饱满的数据并进行严谨的数据分析。 2，界面设计还不够美观，在后续如果有条件应该请比较专业或者有艺术细胞的界面设计人员，目前是自己将界面设计和前端代码全包了，任务量有点大，所以导致呈现效果不够美观。
