微信小程序--首页界面 demo（一）

效果图

仅含上两部分

wxml

<view class="{{scrollTop>120?'top':'topx'}}">
<view class="top_a">

<view class="top_imgx">
<image  class="top_img" src="https://tvax1.sinaimg.cn/crop.0.0.512.512.180/006cV2kkly8g7ufng2dhij30e80e8gm8.jpg?KID=imgbed,tva&Expires=1573206599&ssig=DVpcBLXHht"></image>
<view class="top_name">
<text>里海轰</text>
</view>
</view>

<view class="top_content">
		<picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="DateChange">
<view class="top_contenta">在一起</view>
<text><text class="top_contentb">{{total_days}}</text>天</text>
		</picker>
</view>

<view class="top_imgx">
<image  class="top_img" src="https://wx2.sinaimg.cn/square/006cV2kkly8g1alzwtzgcj30e80e8q38.jpg"></image>
<view class="top_name">
<text>海轰</text>
</view>
</view>

</view>
</view>



<view class="middle">
<view class="middle_box" wx:for="{{functions}}" bindtap="tofunction" data-id="{{index}}">
<view class="box_right">
<view class="box_righttop">{{item.name}}</view>
<view class="box_rightlow"><text style="font-size:50rpx;margin:3rpx;color:red;">{{item.numbers}}</text>{{item.classifier}}</view>
</view>
<view class="box_left">
<image  class="box_img" src="{{item.iconpath}}"></image>
</view>

</view>

</view>

wxss

.topx {
  width: 90%;
  height: 200rpx;
  margin: 30rpx auto;
  z-index: 1;
  border-radius: 10rpx;
 background-image: url(https://wx2.sinaimg.cn/mw1024/006cV2kkly1g8atticb9nj30yj22omye.jpg);
  background-size: cover;
}
.top {
  position: fixed;
  width: 94%;
  height: 200rpx;
  
  left: 3%;
  margin-top: 0rpx;
  z-index: 1;
  border-radius: 10rpx;
 background-image: url(https://wx2.sinaimg.cn/mw1024/006cV2kkly1g8atticb9nj30yj22omye.jpg);
  background-size: cover;
}

.top_a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 10rpx;
  height: 170rpx;
 
}

.top_img { 
  margin: 0 auto;
  width: 100rpx;
  height: 100rpx;
  border-radius: 100%;
}

.top_name {
  margin-top: 10rpx;
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  width: 100%;
  height: 30rpx;
}

.top_imgx {
  margin-top: 20rpx;
  width: 40%;
  height: 140rpx;
  display: flex;
  flex-direction: column;
}

.top_content {
  display: flex;
  flex-direction: column;
  
  margin-top:50rpx;
  width: 20%;
  height: 100rpx;
  text-align: center;
}
.top_contenta{
  width: 100%;
  font-size: 24rpx;
}
.top_contentb{

  font-size: 48rpx;
  color: red;
}


.middle{
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}
.middle_box{
  width:48%;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  height: 200rpx;
  background: yellowgreen;
  border-radius: 16rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.box_right{
width: 50%;
display: flex;
flex-direction: column;
align-items: center; /**子view垂直居中*/
vertical-align: center; /**垂直居中*/
justify-content: center; /**内容居中*/
}
.box_righttop{
padding-top: 40rpx;
padding-left: 30rpx;
width: 100%;
height: 100rpx;
font-size:30rpx;
}
.box_rightlow{
width: 100%;
height: 100rpx;
padding-top: 00rpx;
padding-left: 50rpx;
}
.box_left{
width: 50%;
}
.box_img{
  margin-top:50rpx;
  margin-left: 20rpx;
  width: 120rpx;
  height: 120rpx;
}

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    total_days:'?',
    functions:[
      {
        name:'爱情邮箱',
        numbers:'3',
        iconpath:'/images/caomei.png',
        classifier:"封",
        path:"../mailbox/mailbox"
      },
      {
        name: '爱情邮箱',
        numbers: '3',
        iconpath: '/images/caomei.png',
        classifier: "封",
        path:"../ceshi/ceshi",
      },
      {
        name: '爱情邮箱',
        numbers: '3',
        iconpath: '/images/caomei.png',
        classifier: "封",
      },
      {
        name: '爱情邮箱',
        numbers: '3',
        iconpath: '/images/caomei.png',
        classifier: "封",
      }
    ]
  },

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

})