1.首页展示功能的实现
1.1 结构
1.2 代码实现
1.2.1 界面的设计这里就不多说了,样式都是我自己写的,还有就是页面的跳转,看详细代码
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: null,
schoolInform: null,
testInform: null,
contentInform: null,
indicatorDots: true,
autoplay: true,
circular: true,
interval: 5000,
duration: 1000,
schoolName: null,
id: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this
wx.request({
url: 'http://xxxxxxx:8080/webchat/index/querylatestinfo',
data: {
shoolId: app.globalData.userInfo.schoolid
},
header: {
'content-type': 'application/json' // 默认值
},
success: res => {
console.log(res.data)
that.setData({
imgUrls: res.data.data.pictures,
schoolName: app.globalData.userInfo.schoolname,
schoolInform: res.data.data.message.schoolInform,
testInform: res.data.data.message.testInform,
contentInform: res.data.data.message.contentInform
})
console.log(this.data.schoolInform)
// that.data.schoolInform = res.data.data,message.schoolInform;
// that.data.testInform = res.data.data.message.testInform;
// that.data.contentInform = res.data.data.message.contentInform;
}
})
},
broadcast: function() {
console.log("点击广播成功了")
wx.navigateTo({
url: '../broadcast/broadcast',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
},
schoolInfo: function() {
console.log("点击学校通知成功了")
wx.navigateTo({
url: '../schoolinfo/schoolinfo',
})
},
testInfo: function() {
console.log("点击考试成功了")
wx.navigateTo({
url: '../testinfo/testinfo',
})
},
contentInfo: function() {
console.log("点击竞赛成功了")
wx.navigateTo({
url: '../contentinfo/contentinfo',
})
},
onClickschooolInfo: function() {
var that = this;
that.setData({
id: that.data.schoolInform.id
})
wx.navigateTo({
url: '../content/content?id='+that.data.id,
})
},
onClicktestInfo: function() {
var that = this;
that.setData({
id: that.data.testInform.id
})
wx.navigateTo({
url: '../content/content?id=' + that.data.id,
})
},
onClickcontentInfo: function() {
var that = this;
that.setData({
id: that.data.contentInform.id
})
wx.navigateTo({
url: '../content/content?id=' + that.data.id,
})
}
})
1.2.2 还有就是想要说的是底部导航栏的设计,这个设计,放在全局中app,json
"tabBar": {
"selectedColor": "#FFD700",
"list": [
{
"iconPath": "images/first.png",
"selectedIconPath": "images/firstactive.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"iconPath": "images/my.png",
"selectedIconPath": "images/myactivity.png",
"pagePath": "pages/me/me",
"selectedColor": "#FFFF00",
"text": "我的"
}
]
}
1.3技术难点
1)界面布局的时候,flex布局,很方便,很有效,可以很好的解决布局的位置,不使用这个,很麻烦
2)底部有导航页面和没有导航的界面,跳转的方式要了解。否则跳不过去