十年河東，十年河西，莫欺少年窮

學無止境，精益求精

話不多說，描述後，直接上程式碼及效果圖

描述一：頁面Json檔案，加上如下配置，會使小程式頂部欄自定樣式。

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

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

  width: 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:00010rpx;/*圓角畫圓是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>

效果圖：

僅為了作為記錄，供自己查詢，不喜勿噴

@天才臥龍的部落格