微信小程序

1. 按鈕寬度設(shè)置

   // 1 樣式 width中加入!important
   .centerX{
     margin-top: 90px;
     background-color: #2F91FF;
     border-radius: 22.5px;
     height: 45;
     width: fit-content !important;  // 加入！important
     font-size: 15px;
     color: white;
     font-style: normal;
   }
   // 2 button 加入style 內(nèi)容和樣式中一致
   .centerX{
     margin-top: 90px;
     background-color: #2F91FF;
     border-radius: 22.5px;
     height: 45;
     width: fit-content;
     font-size: 15px;
     color: white;
     font-style: normal;
   }
   <button id="search" class="centerX" style="width: fit-content">搜索</button>
   

2. 控件疊加 居中 View

   /*
   View 樣式  子視圖在父視圖中疊加效果 父視圖 position: relative; z-index: 1; 子視圖  position: absolute; z-index: 1;
   子視圖在父視圖中居中 父視圖樣式  display: flex;  align-items: center;  justify-content: center;
   */ 
   .headView{
     margin-top: 10px;
     width: 100% !important;
     height: 270px;
     background-color: white;
     position: relative;
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .search-button{
     position: absolute;
     z-index: 1;
     background-color: #2F91FF;
     border-radius: 22.5px;
     height: 45;
     width: fit-content !important;
     font-size: 15px;
     color: white;
     font-style: normal;
     margin-top: 0px;
   }
   .circle-image{
     position: absolute;
     z-index: 1;
   }
   .circle-image imageSize {
     width: 225;
     height: 226;
   }
   

3. 頁(yè)面滾動(dòng) 計(jì)算滾動(dòng)區(qū)域

   <scroll-view class="scrollView" scroll-y="true" scroll-top="{{scrollTop}}" style="height:{{clientHeight}}px;">
   

   let screenH = wx.getSystemInfoSync().windowHeight;
   let query = wx.createSelectorQuery().in(that);
   query.select('.headView').boundingClientRect();
   
   query.exec(res => {
     let headH = res[0].height;
     let scrollHeight = screenH - headH - 10;  // 滾動(dòng)區(qū)域高度
     console.log('can scroll height is ' + scrollHeight);
     that.setData({
       clientHeight: scrollHeight
     })
   })
   

4. 控件水平居中對(duì)齊

   1. 父視圖 align-items: center; justify-content: center; display: flex;

      .peripheralView {
        height: 50px;
        margin-left: 15px;
        align-items: center;
        justify-content: center;
        display: flex;
      }
      

   2. 子視圖 align-items: center; justify-content: center; 居左或者居右對(duì)齊 position: absolute; left(right): 15px;

      .peripheralLabel {
        align-items: center;
        justify-content: center;
        font-size: 15px;
        color: #2F91FF;
        width: auto !important;
        height: 45;
        position: absolute; // 居左對(duì)齊 
        left: 15px; /* 靠左調(diào)節(jié) */
        margin-top: 10px;
        /* text-align: center; */
      }
      .connect-Button {
        margin-top: 10px;
        position: absolute; 
        right: 20px; /* 靠右調(diào)節(jié) */
        background-color: #2F91FF;
        border-radius: 22.5px;
        height: 45;
        width: auto !important;
        font-size: 15px;
        color: white;
        font-style: normal;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
      

5. 列表

   <view wx:for="{{peripheralArr}}" wx:for-item="item" wx:key="*this" class="peripheralView" bindtap="connectPeripheral" data-item="{{item}}">
     <text class="peripheralLabel" >{{item.name}}</text>
     <button id="connect" class="connect-Button">連接</button>
   </view>
   
   

     data: {
       peripheralArr:[],
     },
       wx.getBluetoothDevices({
         success: function (res){
           console.log("success get ");
           // var height = 50 * res.devices.length;
           // console.log("height value  " + height);
           that.setData({
             peripheralArr:res.devices.filter(item => item.name.indexOf("KS") != -1)
             // clientHeight: height
           });
           // console.log(that.data.peripheralArr);
         },
         fail(err){
           // console.log("get bluetooth" + err);
         },
         complete(res){
           // console.log("get bluetooth" + res);
         }
       })