小程序模板網(wǎng)

微信小程序關(guān)于后臺(tái)小數(shù)轉(zhuǎn)換成整數(shù)并且顯示在頁面上

發(fā)布時(shí)間:2018-04-26 11:59 所屬欄目:小程序開發(fā)教程

前言:當(dāng)后臺(tái)傳輸數(shù)據(jù)時(shí)傳輸?shù)臄?shù)字有可能是小數(shù),但是客戶要求必須顯示在頁面的是整數(shù);

思路:因?yàn)楹笈_(tái)傳過來的數(shù)據(jù)大部分都是義以數(shù)組的形式傳過來,將這些數(shù)據(jù)顯示在頁面要進(jìn)行數(shù)據(jù)實(shí)例化并且頁面要用for循環(huán)才可以;

小數(shù)轉(zhuǎn)整數(shù)時(shí)要進(jìn)行二次實(shí)例化才可以顯示在頁面,由于頁面要for循環(huán)所以小數(shù)轉(zhuǎn)整數(shù)也要用for循環(huán)通過這個(gè)數(shù)組獲取下標(biāo)的方式對(duì)應(yīng)的將整數(shù)顯示在頁面,不說了js代碼如下

 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("首頁返回的數(shù)據(jù):" + JSON.stringify(res));
        if (res.code == 0) {
          that.setData({
            bannerList: res.result.bannerList,
            activityList: res.result.activityList,
            teacherList: res.result.teacherList,
            newsList: res.result.newsList,
            shortcutList: res.result.shortcutList,
            placeList: res.result.placeList,
            courseList: res.result.courseList,
            aptitudeList: res.result.aptitudeList,
            branchList: res.result.branchList,
          })
//這里就是對(duì)小數(shù)轉(zhuǎn)換整數(shù)的過程
          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 {
      //登錄態(tài)過期
      that.wxLogin(that);
    }
  },

后臺(tái)傳過來的數(shù)據(jù)如下所示:

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>

效果如下:



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24103.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢