这两部分界面没有数据来源，但出于使得项目框架更加完善的目的，我也实现了相关的界面设计
课表界面 课表设计参考了网上比较成熟的界面设计 wxml代码，采用scroll-view布局。
<!--pages/courselist/courselist.wxml--> <view class="top"> <view wx:for="{{['一','二','三','四','五','六','日']}}" class="top-text">周{{item}}</view> </view> <scroll-view scroll-y="true" class="scroll"> <view style="height:1200rpx;width:730rpx;display:flex;"> <view style="background-color:#D2E6B3;color:#7cba23;"> <view wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12]}}" class="left"> {{item}} </view> </view> <view wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12]}}"> <view style="width:750rpx;margin-top:{{(index+1)*100}}rpx; position: absolute;border-bottom:1rpx solid {{index==3?'red':'lightgray'}};"> </view> </view> <!--课表--> <view wx:for="{{wlist}}"> <view class="flex-item kcb-item" bindtap="showCardView" data-statu="open" data-index="{{index}}" style="margin-left:{{(item.xqj-1)*100}}rpx;margin-top:{{(item.skjc-1)*100+5}}rpx;height:{{item.skcd*100-5}}rpx;background-color:{{colorArrays[index%9]}}"> <view class="smalltext" >{{item.kcmc}}</view> </view> </view> </view> </scroll-view>毕业照界面 毕业照界面采用简单的瀑布流图片布局，通过从数据库获取图片连接并展示。 wxml布局文件
<!--pages/graduatePhoto/result.wxml--> <view style="display:none"> <image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" bindload="onImageLoad"></image> </view> <scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages"> <view style="width:100%"> <view class="img_item"> <view wx:for="{{col1}}" wx:key="id"> <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image> </view> </view> <view class="img_item"> <view wx:for="{{col2}}" wx:key="id"> <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image> </view> </view> </view> </scroll-view>js文件中主要功能代码
onLoad: function () { wx.getSystemInfo({ success: (res) => { let ww = res.windowWidth; let wh = res.windowHeight; let imgWidth = ww * 0.48; let scrollH = wh; this.setData({ scrollH: scrollH, imgWidth: imgWidth }); this.loadImages(); } }) }, onImageLoad: function (e) { let imageId = e.currentTarget.id; let oImgW = e.detail.width; //图片原始宽度 let oImgH = e.detail.height; //图片原始高度 let imgWidth = this.data.imgWidth; //图片设置的宽度 let scale = imgWidth / oImgW; //比例计算 let imgHeight = oImgH * scale; //自适应高度 let images = this.data.images; let imageObj = null; for (let i = 0; i < images.length; i++) { let img = images[i]; if (img.id === imageId) { imageObj = img; break; } } imageObj.height = imgHeight; let loadingCount = this.data.loadingCount - 1; let col1 = this.data.col1; let col2 = this.data.col2; if (col1H <= col2H) { col1H += imgHeight; col1.push(imageObj); } else { col2H += imgHeight; col2.push(imageObj); } let data = { loadingCount: loadingCount, col1: col1, col2: col2 }; if (!loadingCount) { data.images = []; } this.setData(data); },利用瀑布流布局，利用从山大官网上爬下来的图片链接并进行毕业照demo展示，
效果展示：
这两部分虽然没有从数据库获取的正式数据，但我都留了数据接口，后续如果小组获得相关课程信息，和图片信息。就可以直接导入前端界面逻辑。 对于毕业照界面，后续如何加上上传图片功能和图片关键字搜索功能就更加完善了。
