我画的第一个微信小程序页面

十年河东，十年河西，莫欺少年穷

学无止境，精益求精

话不多说，描述后，直接上代码及效果图

描述一：页面Json文件，加上如下配置，会使小程序顶部栏自定样式。

{
  "usingComponents": {},
  "navigationStyle": "custom"  
}

描述二：微信 wxss 计算器的使用

   calc(336*2rpx); /*函数计算*/

描述三：justify-content属性定义了flex容器内item在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

描述4：align-items属性定义项目在交叉轴上如何对齐。

  display: flex;
  align-items: center;

描述5： text-decoration: line-through; /* 文本横线打差*/

  text-decoration: line-through; /* 文本横线  打差*/

描述6：border-radius: 0 0 0 10rpx; /* 圆角画圆是50% */

  border-radius: 0 0 0 10rpx;  /* 圆角 画圆是50% */

描述7：底部固定，并自动适应安卓和IOS

.car{
  height: 100rpx;
  width: 100%;
  display: flex;
  align-items:center;
  background-color: #fff;
  /* fiex 底部固定，通过CSS函数获取底部横条的高度，自动适应苹果和安卓手机 */
  position: fixed;
  bottom: 0;
  margin-bottom: 0;  /* fiex 底部固定，通过CSS函数获取底部横条的高度，自动适应苹果和安卓手机 */
  margin-bottom: constant(safe-area-inset-bottom); /* fiex 底部固定，通过CSS函数获取底部横条的高度，自动适应苹果和安卓手机 */
  margin-bottom: env(safe-area-inset-bottom); /* fiex 底部固定，通过CSS函数获取底部横条的高度，自动适应苹果和安卓手机 */
  justify-content:space-between;
  align-items: center;
  border-top: 2rpx solid #F2F3F7;
}

描述8：行内元素水平居中垂直居中

line-height: 100rpx; /* 垂直居中 */
text-align: center; /* 水平居中 */
display: inline;

描述9：渐变色

   /* 渐变色 */
  background: linear-gradient(149deg, #58E3BD 0%, #52BBBD 100%);

描述10：定位，父元素相对定位，子元素相对距离它最近的父元素进行绝对定位，定位后，不会挤占定位前的空间

父元素：

.box1 {
  width: 100%;
  height: 330rpx;
  position: relative; /*父元素设置相对定位  子元素绝对定位*/
}

子元素：

.icbox {
  height: 26rpx;
  width: 100%;
  position: absolute;/*父元素设置相对定位  子元素绝对定位*/
  top: 220rpx;
  left: 54rpx;
  display: flex;
  align-items: center;
}

描述11：本文中用了Flex 和 position 两个方面的布局，不熟悉的童鞋，可自己修行

最后，代码

wxss

.box1 {
  width: 100%;
  height: 330rpx;
  position: relative; /*父元素设置相对定位  子元素绝对定位*/
}

.body_img {
  width: 100%;

}

.body_imgTxt {
  font-size: 24px;
  color: #fff;
  position: absolute;
  top: 146rpx;
  left: 54rpx;
}

.icbox {
  height: 26rpx;
  width: 100%;
  position: absolute;/*父元素设置相对定位  子元素绝对定位*/
  top: 220rpx;
  left: 54rpx;
  display: flex;
  align-items: center;
}

.icon_img {
  height: 26rpx;
  width: 26rpx;
}

.iocTxt {
  font-size: 24rpx;
  color: #fff;
  margin-left: 10rpx;
}

.buy {
  height: 100rpx;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.buy_img {
  height: 26rpx;
  width: 26rpx;
}

.buyTxt {

  font-size: 12px;
  color: #999;
  font-weight: 2000rpx;
  margin: 0 50rpx 0 8rpx;
}

.goods_lst {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}

.goods {
  width: calc(336*2rpx); /*函数计算*/
  height: calc(78*2rpx);
  display: flex;
  align-items: center;
  border-radius: 12rpx;
  
  padding: 0 40rpx;
  position: relative;
  overflow: hidden;
}

.borderCls{
  border: 6rpx solid #F2F3F7;background-color: #fff;
}
 .active{
  border: 6rpx solid #52BBBD;background-color: #E8F6F7;
}

.titleBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 666;
}

.title {
  color: #374856;
  font-size: 36rpx;
  font-weight: 2000rpx;
  font-family: PingFang HK;
  /* font-weight: 600; */

}

.title_2 {
  font-size: 26rpx;
  color: #707F8B;
  /* font-weight: 600; */
}

.yp {
  flex: 133;
  color: #999999;
  font-size: 24rpx;
  font-family: PingFang HK;
  text-decoration: line-through; /* 文本横线  打差*/
  justify-content: flex-end;
}

.sp {
  flex: 200;
  display: flex;
  align-items: center;

  justify-content: flex-end;
}

.txt {
  font-size: 40rpx;
  color: #374856;
  font-family: Roboto;
}

.yuan {
  font-size: 26rpx;
  color: #374856;
  font-family: Roboto;
}

.yh_box {
  background-color: #F25731;
  width: calc(57*2rpx);
  height: 40rpx;
  font-size: 22rpx;
 color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  /* display: flex;
  justify-content: center; */
  border-radius: 0 0 0 10rpx;  /* 圆角 画圆是50% */
  text-align: center;
  line-height: 40rpx;
}

.car{
  height: 100rpx;
  width: 100%;
  display: flex;
  align-items:center;
  background-color: #fff;
  /* fiex 底部固定，通过CSS函数获取底部横条的高度，自动适应苹果和安卓手机 */
  position: fixed;
  bottom: 0;
  margin-bottom: 0;  /* fiex 底部固定，通过CSS函数获取底部横条的高度，自动适应苹果和安卓手机 */
  margin-bottom: constant(safe-area-inset-bottom); /* fiex 底部固定，通过CSS函数获取底部横条的高度，自动适应苹果和安卓手机 */
  margin-bottom: env(safe-area-inset-bottom); /* fiex 底部固定，通过CSS函数获取底部横条的高度，自动适应苹果和安卓手机 */
  justify-content:space-between;
  align-items: center;
  border-top: 2rpx solid #F2F3F7;
}
.caryuan{
color: #374856;
font-size: 44rpx;
font-family: Roboto;
line-height: 100rpx; /* 垂直居中 */
text-align: center; /* 水平居中 */
display: inline;
margin-left: 26rpx;

}
.btn{
   /* 渐变色 */
  background: linear-gradient(149deg, #58E3BD 0%, #52BBBD 100%);
  width: 302rpx;
  height: 100rpx;
  justify-items: flex-end;
  color: #fff;
  font-size: 32rpx;
  font-family: PingFang HK;
  line-height: 100rpx; /* 垂直居中 */
  text-align: center; /* 水平居中 */
}

.js

// pages/Flex/Flex.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    Goodindex:0,
    goods: [{
      name: "7天不限次",
      info: "",
      oldPrice: "",
      price: "5.00",
      yh: ""
    }, {
      name: "30天不限次", info: "",
      oldPrice: "",
      price: "50.00",
      yh: ""
    }, {
      name: "20次换电卡", info: "有效期5天",
      oldPrice: "18元",
      price: "1999.00",
      yh: "5折优惠"
    }, {
      name: "7次换电卡", info: "",
      oldPrice: "",
      price: "7.00",
      yh: ""
    } ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  tapName: function(e) {
    console.log(e)
    var index=e.currentTarget.dataset.index;
  this.setData({Goodindex:index})
  },
})

wxml

<view class="box1">
  <image class="body_img" src="/images/user/improve/huandianka.png" mode="widthFix">
  </image>
  <view class="body_imgTxt">电池换电卡</view>
  <view class="icbox">
    <image class="icon_img" src="/images/user/improve/goumaixuzhi2.png">
    </image>
    <view class="iocTxt">
      购买须知
    </view>
  </view>
</view>

<view class="buy">
  <image class="buy_img" src="/images/user/improve/goumaixuzhi.png">
  </image>
  <view class="buyTxt">
    购买须知
  </view>
</view>

<view wx:for="{{goods}}" wx:key="name" wx:for-item="item">
  <!--  data-index  函数传递的参数 -->
  <view class="goods_lst" bindtap="tapName" data-index="{{index}}">
    <view class="goods{{index==Goodindex?' active':' borderCls'}}">
      <view class="titleBox">
        <text class="title">{{item.name}}</text>
        <text class="title_2">{{item.info}}</text>
      </view>
      <text class="yp">{{item.oldPrice}}</text>
      <view class="sp">
        <text class="txt">{{item.price}}
        </text> <text class="yuan">元
        </text>
      </view>
      <view wx:if="{{item.yh!=''}}" class="yh_box">
        {{item.yh}}
      </view>
    </view>
  </view>
</view>

<view class="car">
  <text class="caryuan">100元
    </text>
    <view class="btn">
    购买
    </view>
</view>

效果图：

仅为了作为记录，供自己查询，不喜勿喷

@天才卧龙的博客

付婷，你还那么胖吗？如果胖，就减肥肥吧。

我画的第一个 微信小程序页面

最后，代码

我画的第一个微信小程序页面