微信小程序關於后台小數轉換成整數並且顯示在頁面上

前言：當后台傳輸數據時傳輸的數字有可能是小數，但是客戶要求必須顯示在頁面的是整數；

思路：因為后台傳過來的數據大部分都是義以數組的形式傳過來，將這些數據顯示在頁面要進行數據實例化並且頁面要用for循環才可以；

小數轉整數時要進行二次實例化才可以顯示在頁面，由於頁面要for循環所以小數轉整數也要用for循環通過這個數組獲取下標的方式對應的將整數顯示在頁面，不說了js代碼如下小數轉整數的方式有toFixed和parseInt()要根據后台傳的數據類型來判斷

 onLoad: function (options) {
    var that = this;
    if (wx.getStorageSync("openId")) {
      var params = {
        wxOpenId: wx.getStorageSync("openId")
      }
      app.YoniClient.request(app.Func.GET_HOME, params, function (res) {  //這里是后台接口這里定義必須傳三個參數（每個項目傳幾個不一定）
        console.log("首頁返回的數據:" + JSON.stringify(res));
        if (res.code == 0) {
          that.setData({  //實例化第一次傳過來的數據
            courseList: res.result.courseList,

 })
//這里就是對小數轉換整數的過程  let list = that.data.courseList; for (let i = 0; i < list.length; i++) { let price = parseInt(list[i].price); console.log('===========================' + price); let temp = 'courseList[' + i + '].price'; that.setData({ [temp]: price }) } } }) } else { //登錄態過期
 that.wxLogin(that); } },

 let list = that.data.courseList; //這里是將后台courseList傳過來的數據賦值list也就是知道里面有幾組數據間接尋找下標 for (let i = 0; i < list.length; i++) { let price = parseInt(list[i].price); //這里就是對小數進行轉換，price是小數對應的key值 console.log('===========================' + price); let temp = 'courseList[' + i + '].price';//使下標加一 that.setData({ //二次實例化 [temp]: price }) }

后台傳過來的數據如下所示：

data里面還是不變：

courseList: [

    ],

wxml代碼如下：

<view class='index-section-title'>
    <text class='section-title-left-font'>推薦課程</text>
  </view>
  <view class='course'>
    <view class='course_big' wx:for="{{courseList}}">
      <view class='course_img'>
        <image class='course_img_a' src='{{item.imageUrl}}' mode='widthFix'></image>
      </view>
      <view class='course_text'>
        <view class='course_text_a'>{{item.name}}</view>
        <view class='course_text_b'>{{item.summary}}</view>
        <view class='course_price'>
          <text class='course_price_a fl'>{{item.originalPrice}}元</text>
          <text class='course_price_b fr'>{{item.price}}元</text>
          <view class='clear'></view>
        </view>
      </view>
    </view>
  </view>

效果如下：

 

本人原創博客希望大家提出意見: