微信小程序关于后台小数转换成整数并且显示在页面上

时间：2024-03-06 21:33:29

前言：当后台传输数据时传输的数字有可能是小数，但是客户要求必须显示在页面的是整数；

思路：因为后台传过来的数据大部分都是义以数组的形式传过来，将这些数据显示在页面要进行数据实例化并且页面要用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>

效果如下：

 

本人原创博客希望大家提出意见:

 

相关文章