信管117132岳颖云——实训第六天:学习总结和作业

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Yyingyunxi/article/details/93670818

一、学习总结

1、天气预报地点搜索框布局及功能实现

(1)实现小程序天气预报搜索框

index.wxml

 <image class='img' src='../../assets/icons/icon.png'></image>
  <input class='ipt' placeholder-class='pla' placeholder='请输入城市名,快速查询天气信息' bindconfirm="finish" ></input>
</view>
<!-- ENDnav -->

<!-- user -->
<view class='user'>

  <view class='userAvatar'>
    <open-data type="userAvatarUrl"></open-data>
  </view>

  <open-data class="userNick" type="userNickName"></open-data>
</view>
<!-- END user -->

<!-- location -->
<view class='map'>

  <view class='l-box'>
    <image class="img" src='../../assets/icons/location.png'></image>
    <text class='loc'>麻章</text>
  </view>
 
    <text class='r-box'>更新</text>
  
</view>
<!-- END location -->

<!-- weather -->
<view class='info'>
  <view class='tem'>
   29 <text>℃</text>
  </view>
  <text class='wea'>{{weather.data[0].wea}}</text>
  <text class='air_level'>空气质量:良</text>
</view>
<!-- END weather -->
 
index.xcss
<!-- weather -->
<view class='info'>
<view class='tem'>
{{tem}} <text>℃</text>
wxss:
.info .tem text{
  position:absolute;
  right:-30rpx;
  top:-15rpx;
  font-size:30rpx;
}
.info .wea{
  color: #666;
}
.info .air_level{
  margin: 10rpx;
  font-size: 30rpx;
  color: #777;
}

二、作业

1、题目:实现未来七天程序的左右滑动

(1)代码:

index.xwml

 <!-- 内容 -->
<view class="section">
  <scroll-view class="scroll-view_H" scroll-x="true" >
    <view class="scroll-view-item_H" style="flex:1;height:100px">
      <view class="w center">未来第一天</view>
      <view class="w b center f50">{{weather.data[1].tem}}</view>
       <view class="w b center f51">{{weather.data[1].wea}}</view>
    </view>
  <view class="scroll-view-item_H" style="flex:1;height:100px">
      <view class="w center">未来第二天</view>
      <view class="w b center f50">{{weather.data[2].tem}}</view>
       <view class="w b center f51">{{weather.data[2].wea}}</view>
    </view>
      <view class="scroll-view-item_H" style="flex:1;height:100px">
      <view class="w center">未来第三天</view>
      <view class="w b center f50">{{weather.data[3].tem}}</view>
       <view class="w b center f51">{{weather.data[3].wea}}</view>
    </view>
      <view class="scroll-view-item_H" style="flex:1;height:100px">
      <view class="w center">未来第四天</view>
      <view class="w b center f50">{{weather.data[4].tem}}</view>
       <view class="w b center f51">{{weather.data[4].wea}}</view>
    </view>
     <view class="scroll-view-item_H" style="flex:1;height:100px">
      <view class="w center">未来第五天</view>
      <view class="w b center f50">{{weather.data[5].tem}}</view>
       <view class="w b center f51">{{weather.data[5].wea}}</view>
    </view>
     <view class="scroll-view-item_H" style="flex:1;height:100px">
      <view class="w center">未来第六天</view>
      <view class="w b center f50">{{weather.data[6].tem}}</view>
       <view class="w b center f51">{{weather.data[6].wea}}</view>
    </view>
  </scroll-view>
</view>

index.wcss

page{
  height: 100%;
  /* background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561348370456&di=940bb674dcde1e5b24f8d372ac970f15&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F30%2F20160730120344_2rFBH.jpeg) no-repeat 0 0; */
  background-size: 100% 100%;
}
.nav{
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.nav>.ipt{
  width: 90%;
  border-bottom: 2rpx solid #ddd;
  padding-left: 60rpx;
  box-sizing: border-box;
}
.pla{
  font-size: 26rpx;
}
.nav>.img{
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: 45rpx;
  top: 5rpx;
}
/* END nav */

/* userinfo */
.user{
  margin: 20rpx 34rpx 0rpx;
  display: flex;
  align-items: center;
}
.user>.userAvatar{
  width: 55rpx;
  height: 55rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 1rpx solid #ddd;
}
.user>.userNick{
  font-size: 28rpx;
  color: #888;
  margin-left: 20rpx;
  /* font-weight: bold; */
}
/* END userinfo */


/* location */
.map{
  margin: 0 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between
}
.map .l-box{
  display: flex;
  align-items: center;
}
.map .img{
  width: 35rpx;
  height: 35rpx;
}
.map .loc{
  font-size: 54rpx;
  margin-left: 15rpx;
  color: #777;
}
.map .r-box{
  font-size: 26rpx;
  color: #999;
}
/* END location */

/* weather */
.info{
  height: 600rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.info .tem{
  height: 400rpx;
  line-height: 400rpx;
  font-size: 120rpx;
  color: #777;
  position: relative;
}
.info .tem text{
  position:absolute;
  right:-30rpx;
  top:-15rpx;
  font-size:30rpx;
}
.info .wea{
  color: #666;
}
.info .air_level{
  margin: 10rpx;
  font-size: 30rpx;
  color: #777;
}
/* END weather */

.center{
  text-align: center;
  margin: auto 0;
}
 

 
.f50{
  font-size: 40rpx;
}
 
.f51{
  font-size: 44rpx;
   font-weight: normal;
}
 

.scroll-view_H{
  width: 100%;
  white-space: nowrap; 

}
.scroll-view-item_H{
  width: 252rpx;
  height: 260rpx;
  display: inline-flex;
  background-color: rgba(255, 192, 203, 0.507);
  flex-direction: column;
  justify-content: flex-end;
}

(2)示意图 

展开阅读全文

没有更多推荐了,返回首页