微信小程序开发入门实战——实现名片布局设计

微信小程序开发入门实战——实现名片布局设计

问题背景

前面文章介绍了flex布局，以及使用flex布局制作色子效果，本文将介绍微信小程序实战实现名片布局设计。

问题分析

话不多说，直接上代码。
（1）index.wxml文件，代码如下：

<view class="outLayer">
  <view class="company">
    xx技术服务有限公司
  </view>
  <View class="name">
    <View class="nameDes">
      <View class="whiteDes">
        bussiness affairs
      </View>
    </View>
    <View class="nameDe">鲍某</View>
  </View>

  <view class="job">
    <view class="jobItem">
      项目老大
    </view>
  </view>

  <View class="contact">
    <view class="cotactContent">
      <View class="line">
      </View>
      <View class="contactDetail">
        <View>公司地址：武汉市藏龙岛</View>
        <View>公司电话：0000000000000</View>
        <View>个人手机：1000000000000</View>
        <View>个人邮箱：10000000@163.com</View>
      </View> 
    </view>
  </View>
</view>

（2）index.wxss文件，代码如下：

.outLayer{
  margin:50rpx;
  height: 400rpx;
  display:flex;
  flex-direction: column;
  background: white;
  border: 3rpx solid lightgrey;
  border-bottom: 15rpx solid lightgrey;
}

.company{
  font-size: 25rpx;
  margin: 15rpx;
  text-align: end;
}

.name{
  margin-top: 30rpx;
  height: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.nameDes{
  display: flex;
  flex-direction: row;
  width: 50%;
  height: 60rpx;
  background-color: black;
  justify-content: space-around;
  align-items: center;
}

.whiteDes{
  color: white;
  font-size: xx-small;
  font-style: oblique;
}

.nameDe{
  width: 50%;
  height: 30rpx;
  font-size: 40rpx;
  text-align: center;
}

.job{
  margin-top: 20rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.jobItem{
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: x-small;
}

.contact{
  margin-top: 60rpx;
  width: 100%;
  height:120rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.cotactContent{
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.line{
  width: 3rpx;
  height: 100%;
  background-color: black;
}

.contactDetail{
  margin-left: 10rpx;
  display: flex;
  flex-direction: column;
  font-size: 18rpx;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  justify-content: space-around;
}

运行结果如下：

问题总结

本文介绍了微信小程序如何实战实现名片布局设计，有兴趣的同学可以进一步深入研究。