微信小程序时间两侧拖拉

本文主要是介绍微信小程序时间两侧拖拉，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果：

在这里插入图片描述

wxs文件:

var taskFr = {getTask: function (time) {time = time+480;var d, h, m, h = (time / 60 % 24).toFixed(0);m = (time  % 60).toFixed(0);if(m>=0 &&m<10){m='0'+m}var timeStr =  h + ":" + m return timeStr}
}module.exports = {getTask: taskFr.getTask
}

xml文件：

<view class="history"><view id="the-id" class="content" wx:for="{{historyList}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx"><view class="history-detail"><mp-cell bindtap="godetail" data-index="{{itemName.code}}" link hover url="/pages/panel/myEquipment/devicecontrol/devicehistory/historydetail/historydetail"value="消毒时间：{{itemName.startTime}}"><image slot="icon" src="/assets/images/时间.svg"style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image></mp-cell><view class="line"></view><mp-cell hover value="消毒响应：{{itemName.status==1?'成功':'消毒失败'}}"><image slot="icon" src="/assets/images/响应.svg"style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image></mp-cell><view class="line"></view><mp-cell hover value="消毒结束时间：{{itemName.endTime}}"><image slot="icon" url="../index" src="/assets/images/结束时间.svg"style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image></mp-cell><view class="line"></view><mp-cell hover value="指令编号：{{itemName.code}}"><image slot="icon" src="/assets/images/编号.svg"style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image></mp-cell><view class="line"></view></view></view><view class="more"  bindtap="moreHistory">点击加载更多</view>
</view>

wxss文件：

.line {border: 1rpx dotted lightgray;height: 1rpx;width: 100%;
}
.history {background-color: #fcfaf9;
}
.history-detail {background-color: white;margin-bottom: 100rpx;
}
.more {/* position: fixed; *//* position: absolute; *//* bottom: 20rpx; */margin-top: 20px;text-align: center;height: 60rpx;
}

js文件：

// pages/panel/myEquipment/devicecontrol/devicehistory/devicehistory.js
const util = require('./../../../../../utils/util')
import {requst_disinfection_history
} from './../../../../api/index'
Page({/*** 页面的初始数据*/data: {//每页显示的行数：pagesize: 2,//页码（从1开始）：page: 1,//用于标识是否还有更多的状态state: 1,//用于数组的追加和暂存allList: [],//用于渲染页面的数组historyList: [],},//自定义函数//点击后保留当前id的机器数据再进入下个页面godetail:function (event) {var index=event.currentTarget.dataset['index'];wx.setStorageSync('historyid', index)// wx.setStorageSync('name', 'jello')// wx.navigateTo({//   url: '/pages/panel/myEquipment/devicecontrol/devicecontroal'//点击后跳转// })},//日期转换函数getTime: function (time) {time *= 1;let date = new Date(time);let y = date.getFullYear(); // 年let MM = date.getMonth() + 1; // 月MM = MM < 10 ? ('0' + MM) : MM;let d = date.getDate(); // 日d = d < 10 ? ('0' + d) : d;let h = date.getHours(); // 时h = h < 10 ? ('0' + h) : h;let m = date.getMinutes(); // 分m = m < 10 ? ('0' + m) : m;let s = date.getSeconds(); // 秒s = s < 10 ? ('0' + s) : s;return y + '年' + MM + '月' + d + '日' + h + ':' + m + ':' + s;},//获取消毒列表getHistory(pagesize, page) {var that = this;requst_disinfection_history({pagesize,page}).then((e) => {if (res.data.length < 1) {that.setData({state: 0})} else if (res.data.length < that.data.pagesize) {that.setData({state: 0})}e.forEach(res => {console.log(res.startTime);res.startTime = that.getTime(res.startTime);res.endTime = that.getTime(res.endTime);that.data.allList.push(res)})that.setData({historyList: that.data.allList})console.log(that.data.historyList);}).catch((err) => {console.log(err);})},moreHistory() {this.setData({page: this.data.page + 1});this.getHistory(this.data.pagesize, this.data.page);},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = thiswx.setNavigationBarTitle({title: '历史消毒记录'});//页面初始化this.getHistory(this.data.pagesize, this.data.page);//模拟请求数据util.httpFake('disinfection-history', 'get', {}, function (e) {console.log(e);e.forEach(res => {console.log(res.startTime);res.startTime = that.getTime(res.startTime);res.endTime = that.getTime(res.endTime);that.data.allList.push(res)})that.setData({historyList: that.data.allList})console.log(that.data.historyList);});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})