2. 程式人生 > 其它 >我的微信小程式第四個頁面【IE 盒模型、動態計算高度、margin-Top 慎用於子元素、scroll-view下拉重新整理，scroll-view上拉載入】

我的微信小程式第四個頁面【IE 盒模型、動態計算高度、margin-Top 慎用於子元素、scroll-view下拉重新整理，scroll-view上拉載入】

阿新 • • 發佈：2021-11-17

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

學無止境，精益求精

描述1：box-sizing:border-box;/*IE盒模型內容寬度+padding+border==賦值的寬度{100%}*/

首先W3c的標準是：

IE 盒模型為：

IE 盒模型的CSS

.orderTitle{
  height: 126rpx;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 22rpx 0 22rpx;
  box-sizing: border-box; /*IE 盒模型 內容寬度+padding+border == 賦值的寬度{100%}
 
*/
  
  background-color: #fff;
}

描述三，動態計算

.scroll{
  height: calc(100vh - 90rpx - 126rpx);/*動態計算高度 注意 減號要和數字之間有間隔  要帶單位哦 */ 
}

描述4：/*子盒子設定Magin-Top會作用於父盒子並把父盒子拉下來慎用*/

.userOrder{
  width: 710rpx;
  height: auto;
  margin-top: 28rpx; /*子盒子設定 Magin-Top 會作用於父盒子並把父盒子拉下來 慎用*/
  margin-left: 20rpx;
  background-color
 
: #fff;
  padding: 0 32rpx 32rpx 32rpx;
  box-sizing: border-box; /*IE 盒模型 內容寬度+padding+border == 賦值的寬度{100%}*/
  
}

描述5：ES6陣列語法

  saixuan() {
    //陣列的合併
    var hebingAry = this.data.Users.concat(this.data.Users2);
    console.log("合併後的陣列長度為：" + hebingAry.length);
   //根據陣列屬性篩選--結果為陣列
    var Useref=this
 
.data.Users.filter(A => A.id==1);
    console.log(Useref);

    //find  也是篩選  結果為物件  只返回滿足條件的第一個
    var fef=this.data.Users.find(A => A.id==1||A.id==2);
    console.log(fef);

      //find  也是篩選  結果為索引  只返回滿足條件的第一個
      var inde=this.data.Users.findIndex(A => A.id==2||A.id==2);
      console.log(inde);

      console.log("..............................")
      //遍歷  forEach   
      this.data.Users.forEach((e,i) => {
        e.name=e.name+"陳"
      
      });
      console.log("......222222222222222222222222222222222222222222........................")
        //遍歷 Map   
       var result = this.data.Users2.map((e,i) => {
        e.name=e.name+"陳"
         
        }); 
        console.log(this.data.Users)
        console.log(this.data.Users2)

  },

效果圖如下：

程式碼如下：

wxml:

<!--pages/order/order.wxml-->
<view class="bigview">
  <view class="ordercate">
    <view class="wwc {{wxIndex==1?'wwcactive':''}}" bindtap="wwcTap" data-index="1">已完成</view>
    <view class="wwc {{wxIndex==2?'wwcactive':''}}" bindtap="wwcTap" data-index="2">未完成</view>
  </view>

  <view class="orderTitle">
    <view class="tlc {{tlcIndex==3?'tlcactive':''}}" bindtap="tlcTap" data-index="3">全部</view>
    <view class="tlc {{tlcIndex==4?'tlcactive':''}}" bindtap="tlcTap" data-index="4">門店</view>
    <view class="tlc {{tlcIndex==5?'tlcactive':''}}" bindtap="tlcTap" data-index="5">充電</view>
    <view class="tlc {{tlcIndex==6?'tlcactive':''}}" bindtap="tlcTap" data-index="6">換電</view>
    <view class="tlc {{tlcIndex==7?'tlcactive':''}}" bindtap="tlcTap" data-index="7">商城</view>
  </view>
  <scroll-view class="scroll" scroll-y="{{scor}}" bindscrolltolower="bindscrolltolower" bindrefresherrefresh="bindrefresherrefresh" refresher-enabled="{{true}}" refresher-triggered="{{IsOpen}}">
    <view class="userOrder"  wx:for="{{orderData}}" wx:for-item="item" wx:key="orderDetailId">
      <view class="orderType">{{item.businessType}}訂單</view>
      <view class="Forderinfo">
        <view class="orderinfoLeft">訂單編號：</view>
        <view class="orderinfo">{{item.orderNo}}</view>
      </view>
      <view class="Forderinfo">
        <view class="orderinfoLeft">商品名稱：</view>
           <view class="orderinfo">{{item.goodsName}}</view>
      </view>

      <view class="Forderinfo">
        <view class="orderinfoLeft">成交時間：</view>
        <view class="orderinfo">{{item.orderTime}}</view>
      </view>

      <view class="Forderinfo">
        <view class="orderinfoLeft">成交金額：</view>
        <view class="orderinfo">{{item.orderPrice}}</view>
      </view>
    </view>
  </scroll-view>

</view>
View Code

JS

// pages/order/order.js
var URL = "https://xxx.com/DEV/WuAnChangeApi";

const app = getApp();
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    Users: [{
      id: 1,
      name: "chen"
    }, {
      id: 2,
      name: "chen2"
    }, {
      id: 3,
      name: "chen3"
    }, {
      id: 4,
      name: "chen4"
    }, {
      id: 5,
      name: "chen5"
    }],
    Users2: [{
      id: 1,
      name: "張"
    }, {
      id: 2,
      name: "張2"
    }, {
      id: 3,
      name: "張3"
    }, {
      id: 4,
      name: "張4"
    }, {
      id: 5,
      name: "張5"
    }],
    wxIndex: 1,
    tlcIndex: 3,
    tabType: null,
    scor: true,
    orderData: [],
    pagination: {},
    currentpageIndex: 1,
    IsOpen: false
  },


  

 
  saixuan() {
    //陣列的合併
    var hebingAry = this.data.Users.concat(this.data.Users2);
    console.log("合併後的陣列長度為：" + hebingAry.length);
   //根據陣列屬性篩選--結果為陣列
    var Useref=this.data.Users.filter(A => A.id==1);
    console.log(Useref);

    //find  也是篩選  結果為物件  只返回滿足條件的第一個
    var fef=this.data.Users.find(A => A.id==1||A.id==2);
    console.log(fef);

      //find  也是篩選  結果為索引  只返回滿足條件的第一個
      var inde=this.data.Users.findIndex(A => A.id==2||A.id==2);
      console.log(inde);

      console.log("..............................")
      //遍歷  forEach   
      this.data.Users.forEach((e,i) => {
        e.name=e.name+"陳"
      
      });
      console.log("......222222222222222222222222222222222222222222........................")
        //遍歷 Map   
       var result = this.data.Users2.map((e,i) => {
        e.name=e.name+"陳"
         
        }); 
        console.log(this.data.Users)
        console.log(this.data.Users2)

  },
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    // wx.showLoading({
    //   title: '請稍後',
    //   mask: true
    // })

    this.saixuan();

    this.GetOrder();
  },
  //上拉獲取資料
  bindscrolltolower() {
    let that = this;
    that.setData({
      currentpageIndex: that.data.pagination.pageNumber + 1,
    })
    that.GetOrder();
  },
  //下來重新整理
  bindrefresherrefresh() {
    console.log('觸發了')
    this.setData({
      orderData: [],
      currentpageIndex: 1,
      pagination: {}
    })
    this.GetOrder()

  },


  wwcTap(e) {
    console.log(e)
    let index = e.currentTarget.dataset.index;
    this.setData({
      wxIndex: index,
      tlcIndex: 3
    });
  },
  tlcTap(e) {
    let that = this;
    console.log(e)
    let index = e.currentTarget.dataset.index;
    that.setData({
      tlcIndex: index
    });
    if (index == 3) {
      that.tabType = null;
    }
    if (index == 4) {
      that.tabType = "門店";
    }
    if (index == 5) {
      that.tabType = "充電";
    }
    if (index == 6) {
      that.tabType = "換電";
    }
    if (index == 7) {
      that.tabType = "商城";
    }

  },

  async GetOrder() {
    let that = this;
    if (that.data.currentpageIndex > that.data.pagination.pageCount) {
      return;
    }
    let search = {
      isComplete: true,
      pageNumber: that.data.currentpageIndex,
      pageSize: 10,
      tabType: that.data.tabType
    }
    //method: method,
    var result = await app.request({
      url: "/api/v1/OrderInfo/GetOrderList",
      data: search,
      method: "POST"
    })
    console.log(result.data)
    var rdata = result.data.data;
    if (that.data.orderData) {
      rdata = that.data.orderData.concat(rdata);
    }
    that.setData({
      orderData: rdata,
      pagination: result.data.pagination,
      IsOpen: false
    })
  },

  /**
   * 複製訂單編號
   */
  copy: function (e) {
    wx.setClipboardData({
      data: e.currentTarget.dataset.num,
      success: function (res) {
        wx.getClipboardData({
          success: (option) => {
            console.log(option.data)
          },
        })
      },
      fail: function (err) {

      }
    })
  },
})
View Code

WXSS

/* pages/order/order.wxss */
.bigview{
  background-color: #F4F8FB;
  height: 100vh;
}
.ordercate {
  height: 90rpx;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
}

.wwc {
  width: 90rpx;
  height: 42rpx;
  font-size: 30rpx;
  font-weight: 600;

}
.wwcactive{
  color: #0DD0D0;
}

.orderTitle{
  height: 126rpx;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 22rpx 0 22rpx;
  box-sizing: border-box; /*IE 盒模型 內容寬度+padding+border == 賦值的寬度{100%}*/
  
  background-color: #fff;
}

.tlc{
  background-color: #F5F9FB;
  width: 132rpx;
  height: 64rpx;
  font-size: 28rpx;
  font-weight: 500;
  border:2rpx solid  #F5F9FB; 
   line-height: 64rpx; /* 垂直居中 */
  text-align: center; /* 水平居中 */
  border-radius: 10rpx;
  
}

.tlcactive{
  background-color: #E5F9F9;
  color: #0DD0D0;
}

.scroll{
  height: calc(100vh - 90rpx - 126rpx);/*動態計算高度 注意 減號要和數字之間有間隔  要帶單位哦 */ 
}

.userOrder{
  width: 710rpx;
  height: auto;
  margin-top: 28rpx; /*子盒子設定 Magin-Top 會作用於父盒子並把父盒子拉下來 慎用*/
  margin-left: 20rpx;
  background-color: #fff;
  padding: 0 32rpx 32rpx 32rpx;
  box-sizing: border-box; /*IE 盒模型 內容寬度+padding+border == 賦值的寬度{100%}*/
  
}

.orderType{
  width: 100%;
  height: 112rpx;
  color: #1B1F2B;
  font-size: 32rpx;
  font-weight: 600;
  display:  flex;
  align-items: center;
  border-bottom: 2rpx solid #ECEDF1;
  
}

.Forderinfo{
  display:  flex;
  justify-content: space-between;
  margin-top: 32rpx;
 
}
.orderinfoLeft{
  color: #374353;
  font-size: 28rpx;
  font-weight: 500;
  width: 30%;
 
}
.orderinfo{
  color: #374353;
  font-size: 28rpx;
  font-weight: 500;
  text-align: right;
  
}
View Code

@天才臥龍的部落格

付婷，你還那麼胖嗎？如果胖，就減肥肥吧。

相關推薦

我的微信小程式第四個頁面【IE 盒模型、動態計算高度、margin-Top 慎用於子元素、scroll-view下拉重新整理，scroll-view上拉載入】

十年河東，十年河西，莫欺少年窮 學無止境，精益求精 描述1：box-sizing:border-box;/*IE盒模型內容寬度+padding+border==賦值的寬度{100%}*/

微信小程式中做分類頁面，兩個scrool-view同時滾動的問題

　　今天做了一個練習的時候，遇到了一點點的問題，明明是寫了兩個scrool-view，但是這兩個會同時的滾動。找了一下原因才知道是要給scrool-view所在的容器中新增高度，否則兩個會一起滾動。計算高度的時候，用到了c

微信小程式中的滑動頁面隱藏和顯示元件功能的實現程式碼

用csdnAPP的使用者都知道，在釋出blink動態時，那個紅色按鈕會隨著你滾動頁面消失或者出現。往上滑動時，按鈕消失。往下滑動時，按鈕出現。

微信小程式元件學習 -- 註冊頁面

微信小程式元件使用手冊地址： 1. 百度搜索“微信公眾平臺”，掃碼登入之後，點選幫助文件裡面的普通小程式。

微信小程式巢狀h5頁面，h5頁面返回小程式，小程式和h5的頁面和互動方法，h5點選分享小程式頁面

相信大家在做小程式的時候有些需求會需要巢狀h5頁面正常的h5頁面巢狀很簡單就是一個web-view然後放入h5連結就可以了

微信小程式--路由變化對頁面生命週期的影響

1、在小程式中所有頁面的路由全部由框架進行管理，框架以棧的形式維護當前的所有頁面，當發生路由切換的時候，頁面棧的表現如下：

微信小程式全域性配置和頁面配置

小程式根目錄下的 app.json 檔案用來對微信小程式進行全域性配置，決定頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 等。

微信小程式點選改變頁面顏色

微信小程式點選改變頁面顏色 用了colorui 元件庫 wxml <view class="page" style="background-color: {{backgroundColor}}">

微信小程式實現點選頁面出現文字

本文例項為大家分享了微信小程式實現點選頁面地方出現文字的具體程式碼，供大家參考，具體內容如下

微信小程式實現音樂播放頁面佈局

本文例項為大家分享了微信小程式實現音樂播放頁面的佈局，供大家參考，具體內容如下

微信小程式彈窗禁止頁面滾動的實現程式碼

下面給大家介紹下小程式彈窗禁止頁面滾動的效果： 在小程式彈窗時，外部頁面禁止滾動， 可以在最外部容器設定catchtouchmove

微信小程式學習筆記之頁面配置與路由方式

最近在學習回顧小程式的開發，將一些學習結果做個筆記。參考微信小程式官方文件：developers.weixin.qq.com/miniprogram…

微信小程式如何保證每個頁面都已經登陸詳解

目錄現狀解決方案進一步解決方案最後現狀 一個微信小程式中，有首頁，有個人頁面，還有一些列表頁面，詳情頁面等等，這些頁面大部分是可以分享的。當分享出去的頁面被一個另一個使用者開啟的時候，這個頁面怎麼確保

微信小程式純嵌入Vue頁面，製作一個完整的小程式

效果圖 小程式載入連結 微信嵌入連結程式碼相當簡單 1、index.wxml載入一個web-view元件，動態繫結地址

微信小程式之分享當前頁面截圖給微信好友

參考連結：https://blog.csdn.net/qq_39410252/article/details/121278343 效果圖： 實現步驟：

第三彈！全球首個微信小程式（應用號）開發教程！通宵吐血趕稿，每日更新！...

感謝朋友們的支援！這兩天博卡君收到了很多支援和安慰，也認識了很多志同道合的朋友。目前微信公佈的工具和程式碼都不是正式版，隨時有可能調整，大家先體驗和學習為主吧。最近這個教程搞得我也心力交瘁

你的班車在哪裡——我的首個微信小程式開發歷程和技術總結

毫無疑問，漫無目的的寫程式碼是效率極其低下的，不論對於學習又或者是工作，所以我一直堅信需求才是創作的源動力。這個小程式謀劃已久，可能從開始來712工作就有了這個想法，對於我這種對天津大街小巷還不夠熟悉的

我畫的第一個 微信小程式頁面

十年河東，十年河西，莫欺少年窮 學無止境，精益求精 話不多說，描述後，直接上程式碼及效果圖

微信小程式中scroll-view被三個touch事件影響導致無法滑動的問題

問題所在：父元素使用了touchstart,touchmove,touchend三個事件，導致作為子元素的scroll-view元件無法滑動

微信小程式基於movable-view實現滑動刪除效果

基於movable-view實現的一種較為完美的滑動刪除效果 前言：用了很多去實現滑動刪除的效果，都不太盡如人意，最後用小程式官方專用滑動元件來實現，但是這個元件有一點坑，咱們慢慢道來