微信小程序——布局笔记1

图1

 图2

 以下是图1代码：

图1的.wxml代码

<view class="list-cotainer">
  <view>
    <view>
      <image src="./../img/course.png" mode="" />
    </view>
    <text>本周课表</text>
  </view>
  <view>
    <view>
      <image src="./../img/score.png" mode="" />
    </view>
    <text>成绩查询</text>
  </view>
  <view>
    <view>
      <image src="./../img/schedule.png" mode="" />
    </view>
    <text>课程签到</text>
  </view>
  <view>
    <view>
      <image src="./../img/calendar.png" mode="" />
    </view>
    <text>学校校历</text>
  </view>

</view>
<!-- 提示:bindtap="toMessage"点击跳转图2界面 -->
<view class="listen-container" bindtap="toMessage">
  <view>
    <image src="./../img/listen.png" mode="" />
  </view>
  <view>提示：获取服务通知请订阅消息才能实时推送，点击进入</view>
</view>

图1的.wxss代码

/* pages/list/list.wxss */
.list-cotainer{
  width: 100%;
  height: 300rpx;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  align-items: center;
}
.list-cotainer view{
  width: 150rpx;
  display: flex;
  flex-wrap: wrap; 
}
.list-cotainer view view{
  width: 100%;
  display: flex;
  justify-content: center;
}
.list-cotainer view image{
  width: 100rpx;
  height: 100rpx;
}
.listen-container{
  width: 100%;
  height: 150rpx;
  background-color: #666666;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  align-items: center;
  font-size: 32rpx;
}

.listen-container view image{
  width: 50rpx;
  height: 50rpx;
}

图1的.js代码（实现图1跳转图2界面）

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  // 图1界面跳转到图2界面
  toMessage(){
    wx.navigateTo({
      url: '/pages/message/message',
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

图2的.wxml代码

<!--page/message/message.wxml-->
<view class="meaasge-container">
  <view class="top">
    <view class="information">
      <view>订阅信息</view>
      <view>学号/职工号：XXXXXXXX</view>
      <view>姓名：CUYG</view>
    </view>
    <view class="img">
      <image src="./../img/message.png" mode="" />
    </view>
  </view>
  <view >
    暂时无相关订阅
  </view>
</view>

图2的.wxss代码

/* page/message/message.wxss */
.top{
  width: 100%;
  height: 250rpx;
  background-color: #f1eeee;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  align-items: center;
}
.top .information{
  width: 400rpx;
}
.top .information view:nth-child(1){
  font-size: 50rpx;
  font-weight: 600;
}
.top .information view:nth-child(2){
  font-size: 30rpx;
  font-weight: 200;
}
.top .information view:nth-child(3){
  font-size: 30rpx;
  font-weight: 200;
}


.top .img image{
  width: 200rpx;
  height: 200rpx;
}