[JavaScript知识库]微信小程序

后台数据列表渲染

效果图：

?

HTML：

<view class="wai">
    <view class="left">
        <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex;width:100%;">
            <view wx:for='{{personalList1}}' bindtap="{{item.left}}" class="left1" wx:key='index'
            data-index="{{index}}"><image src="{{item.endfont}}"></image>{{item.contestName}}</view>
        </scroll-view><!--考核数组的渲染，类似PC端Vue-->
    </view>
</view>

js：

function resvi(date){
    if((date.getMonth() + 1)<10){
        var Month='0'+(date.getMonth()+1);
    }else{
        Month=date.getMonth()+1;
    }
    if((date.getDate())<10){
        var Datee='0'+(date.getDate());
    }else{
        Datee=date.getDate();
    }
    if((date.getHours())<10){
        var Hours='0'+(date.getHours());
    }else{
        Hours=date.getHours();
    }
    if((date.getMinutes())<10){
        var Minutes='0'+(date.getMinutes());
    }else{
        Minutes=date.getMinutes();
    }
    if((date.getSeconds())<10){
        var Seconds='0'+(date.getSeconds());
    }else{
        Seconds=date.getSeconds();
    }
    return date.getFullYear() + '-' + Month + '-' + Datee + ' ' + Hours + ':' + Minutes+':'+Seconds;
    /*var util = require('../../utils/utils.js');
    var endTime=new Date(personalList[i].endTime);
    var creat_date_time=resvi(endTime);*/
}
var personalList1=[];//将获取的时间改变格式后存入该集合
var personalList=[];//将获取的时间改变格式后存入该集合
var util = require('../../utils/utils.js');
let DateTime = ""; //获取进入主界面页面的当前时间
const url=getApp();
Page({
    data: {

    },
    onLoad: function () {
        var that = this;
        wx.request({
            url: url.getUrl("contest"),//考核全局变量的调用
            data: {
                action: "personContests"//传输数据给到后台
            },
            method: 'get',
            header: {
                'content-type': 'application/json'//传输数据方式
            },
            success: function (res) {
                personalList1=[];
                personalList = res.data;//将后台获取的数据处理为自己想要的数据格式
                for(var i=0;i<personalList.length;i++){
                    var date = new Date(personalList[i].registerEndTime);
                    var beginTime=new Date(personalList[i].beginTime);
                    var endTime=new Date(personalList[i].endTime);//更换时间格式
                    var creat_date_time=resvi(date);
                    DateTime = util.formatTime(new Date());
                    if (DateTime < creat_date_time) {
                        personalList1.push({//后台获取的数组键值对如何修改为自己想要的数组键值对
                            contestId:res.data[i].contestId,
                            contestName: res.data[i].contestName,
                            endfont: "../img/ky.png",
                            left: "left",
                            registerEndTime:creat_date_time,
                            beginTime:resvi(beginTime),
                            endTime:resvi(endTime),
                            remark:res.data[i].remark
                        });
                    } else if (DateTime > creat_date_time) {
                        personalList1.push({
                            contestName: res.data[i].contestName,
                            endfont: "../img/bky.png",
                            left: "leftt"
                        });
                    }
                }
                that.setData({
                    personalList1: personalList1//数据渲染到页面上
                })
            }
        })
    },
    left: function (e) {//点击对应列表获取列表下标值和对应下标的json内容
        var index = e.currentTarget.dataset.index;//考核获取数组下标，点击后对应的数据结果
        var contestName = personalList1[index].contestName;
        var registerEndTime = personalList1[index].registerEndTime;
        var beginTime = personalList1[index].beginTime;
        var endTime = personalList1[index].endTime;
        var remark = personalList1[index].remark;
        var contestId = personalList1[index].contestId;
        wx.navigateTo({
            url: '../lan/lan?contestName=' + contestName + '&registerEndTime=' + registerEndTime + '&beginTime=' + beginTime + '&endTime=' + endTime + '&remark=' + remark + '&contestId=' + contestId,
        })//页面传值
    },
    leftt: function () {
        wx.showToast({
            title: '报名已截至！',
            icon: 'none',
            duration: 2000
        })
    }
})

CSS：

image{
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 20px;
    margin-top: -3px;
}
.wai{
    width: 88%;
    padding: 3%;
    margin-left: 3%;
    background-color: #ffffff;
    margin-top: 1%;
    border-radius: 5px;
    font-size: small;
}
.left{
    float: left;
    width: 100%;
}
.left1{
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid rgb(158, 146, 146,0.1);
    padding: 3%;
    vertical-align: middle;
}

效果：

点击对应列表下的文字，页面传值到对应页面，获取对应下标index的值和对应的内容，适合进行大量类似数据需要用户作出选择时使用，如：报名、选择课程等。