微信小程序关于后台小数转换成整数并且显示在页面上 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

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

发表时间:2021-3-31

发布人:葵宇科技

浏览次数:138

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

思路:因为后台传过来的数据大部分都是义以数组的形式传过来,将这些数据显示在页面要进行数据实例化并且页面要用for循环才可以;

小数转整数时要进行二次实例化才可以显示在页面,由于页面要for循环所以小数转整数也要用for循环通过这个数组获取下标的方式对应的将整数显示在页面,不说了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("首页返回的数据:" + 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,
})
//这里就是对小数转换整数的过程
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);
}
},

后台传过来的数据如下所示:

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=https://www.wxapp-union.com/'{{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>

效果如下:

相关案例查看更多