第三章作业

第一题

制作简易计算机

代码如下

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: '简易计算器☞',
    userInfo: {},
    defaultSize: 'default',
    disabled: false,
    iconType:'info_circle'
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  toCalc:function(){
    wx.navigateTo({
      url:'../calc/calc'
    })
  },
  onLoad: function () {
    console.log('onLoad');
    var that = this
  	//调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    
  </view>
  <view>
    <text class="userinfo-nickname">{{userInfo.nickName}}（Dunizb）</text>
  </view>
  <view class="usermotto">
    <!--<text class="user-motto">{{motto}}</text>-->
    <button type="default" size="{{primarySize}}" plain="{{plain}}" hover-class="button-hover"
        disabled="{{disabled}}" bindtap="toCalc"> {{motto}} </button>
  </view>
  <view>
    <navigator url="view" class="github" hover-class="navigator-hover">
      <icon type="{{iconType}}" class="icon" size="20"/>GitHub
    </navigator>
  </view>
</view>

/**index.wxss**/
.usermotto{
  /*display: flex;*/
  /*flex-direction: column;*/
  /*align-items: center;*/
  /*width:256rpx;*/
  /*height: 512rpx;*/
}

.userinfo-avatar {
  width: 128px;
  height: 128px;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
  margin-top:80px;
}

.usermotto {
  margin-top: 35%;
}

/** 修改button默认的点击态样式类**/
.button-hover {
  background-color: red;
}

/** 修改默认的navigator点击态 **/
.navigator-hover {
    color:blue;
}
.github{
  color: green;
  font-size: 14px;
  text-align: center;
  margin-top: 5px;
}
.icon{
  vertical-align: middle;
  margin-right: 2px;
}

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

//app.json
{
  "pages":[
    "pages/index/index",
    "pages/calc/calc",
    "pages/history/history",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#da7c0c",
    "navigationBarTitleText": "简易计算器",
    "navigationBarTextStyle":"white"
  }
}

 结果如下

 第二题

实现以下布局效果

代码如下

{
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTitleText": "趋势",
  "navigationBarTextStyle": "white",
  "backgroundTextStyle": "dark"
}

/**index.less**/
.zhenti{
  height: 100%;
}
.biaotier{
  display: flex;
  justify-content:space-around;
}
.biaotier view{
  float: left;
  width: 160px;
  height: 30px;
  font-size: 15px;
  padding-top: 7px;
  text-align: center;
 
}
ul{
  display: block;
  height: 30px;
  margin-left: 50px;
}
ul li{
  font-size: 13px;
  display: block;
  width: 53px;
  float: left;
  text-align: center;
  height: 24px;
 
}
ul li:hover{
  background-color: burlywood;
}
.tp image{
  float: left;
  display: block;
  margin-left: 35px;
  margin-top: 15px;
  width: 152px; 
  height: 150px;
}

<view class="zhenti">
  <view class="biaotier"style="padding:8px">
    <view class="diyige">行业趋势指南   ∨</view>
    <view class="dierge">年度趋势指南   ∨</view>
  </view>
</view>
<view class="p" style="border: 1px solid #ccc"></view>
<ul >
  <li style="border-bottom: 1px solid black;">最新发布</li>
  <li>单品</li>
  <li>色彩</li>
  <li>风格</li>
  <li>细节</li>
  <li>面料</li>
</ul>
<view>
  <view class="tp">
    <images src="../images/img_01.jpg"/>
  </view>
  <view class="tp">
    <images src="../images/img_02.jpg" />
  </view> 
  <view class="tp">
    <image src="../images/img_03.jpg"/>
  </view>
  <view class="tp">
    <image src="../images/img_04.jpg" />
  </view>
  <view class="tp">
    <image src="../images/img_05.jpg" />
  </view>
  <view class="tp">
    <image src="../images/img_06.jpg"/>
  </view>
</view>