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

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

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

问题背景

前面文章介绍了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</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;
}pany{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;
}

运行结果如下：

问题总结

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