Skip to content

D
DoorLock
Commit b8a266dc by 朱建香
Options

2018/01/02 

1.历史记录上拉加载功能结合
parent 90a08f67
Showing with 70 additions and 324 deletions
dev/src/lang/zh.json
{
"loading": "loading...",
"scroll": {
"clickToLoadMore": "点击加载更多",
"loading": "loading..."
"clickToLoadMore": "上拉加载更多",
"loading": "loading"
},
"btn": {
"confirm": "确定",
......
dev/src/view/device/v_alarmInfo.js
......@@ -14,7 +14,7 @@ import {iot, uPublic, uComponents} from '../../public/public.js';
iot.ready(init);
function init() {
//通用 list、dialog、loading组件
uPublic.componentsInit(['u-list','u-dialog','u-loading','u-refresh']);
uPublic.componentsInit(['u-list','u-dialog','u-loading']);
uPublic.closeSlideBack();
const app = new Vue({
data:{
......@@ -23,27 +23,11 @@ function init() {
list:[],
startId: 0,
deviceId: null,
flag: true,
refreshDisabled: true
flag: true
},
mounted(){
uComponents.showLoading(this);
resolve(this);
let ulistDom = this.$refs.ulist.$el;
console.log(ulistDom);
let self = this;
ulistDom.onscroll = function () {
console.log(ulistDom.offsetHeight+' '+ulistDom.offsetTop);
console.log(ulistDom.scrollTop);
console.log(ulistDom.scrollHeight);
let sum = ulistDom.offsetHeight+ulistDom.scrollTop;
console.log(sum);
//滑到底了
if(sum == ulistDom.scrollHeight){
self.refreshDisabled = false;
ulistDom.style.overflow = 'hidden';
}
}
},
methods:{
getList(){
......@@ -87,7 +71,8 @@ function initComponentsConfig() {
class: 'custom-list',
list: [],
tip: Vue.t('alarmInfo.noInfoTip'),
// pagesize: PAGE_SIZE
pagesize: PAGE_SIZE,
pullup: true
}
},
dialog: {
......@@ -99,13 +84,6 @@ function initComponentsConfig() {
initParam: {
class: 'custom-loading'
}
},
refresh: {
initParam: {
text: ['下拉刷新','松开加载','正在刷新','刷新成功'],
class: 'custom-refersh',
pullUp: false
}
}
}
}
......@@ -113,14 +91,15 @@ function initComponentsConfig() {
// 获取历史记录
function resolve(self) {
self.setDeviceId(iot.navigator.getExtras().deviceId);
uComponents.showLoading(self);
// uComponents.showLoading(self);
iot.business.api.sendCustom('lock/getHistoryRecord',
{
data: {
device_id: self.getDeviceId(),
action: 2,
start_id: self.getStartId(),
page_size: PAGE_SIZE
page_size: PAGE_SIZE,
pullUpLoading: true
},
success: async (response) => {
console.log(response);
......@@ -148,16 +127,6 @@ function resolve(self) {
self.setStartId(record[record.length-1].id);
}
//更新列表数据
uComponents.hideRefresh(self);
let ulistDom = self.$refs.ulist.$el;
let sum = ulistDom.offsetHeight+ulistDom.scrollTop;
//滑到底了
ulistDom.style.overflow = 'auto';
self.refreshDisabled = true;
// if(sum != ulistDom.scrollHeight){
// ulistDom.style.overflow = 'auto';
// self.refreshDisabled = true;
// }
uComponents.changeList(self, self.getList());
}else{
}
......@@ -188,8 +157,4 @@ mui.back = function(){
//tap 点击加载更多
function listLoadTap(self) {
resolve(self);
}
function refreshFresh(self){
resolve(self);
}
\ No newline at end of file
dev/src/view/device/v_hijackRecord.js
......@@ -15,7 +15,7 @@ import {iot, uPublic, uComponents} from '../../public/public.js';
iot.ready(init);
function init() {
//通用 list、dialog、loading组件
uPublic.componentsInit(['u-list','u-dialog','u-loading','u-refresh']);
uPublic.componentsInit(['u-list','u-dialog','u-loading']);
uPublic.closeSlideBack();
const app = new Vue({
data:{
......@@ -25,27 +25,11 @@ function init() {
startId: 0,
deviceId: null,
userInfo: [],
flag: true,
refreshDisabled: true
flag: true
},
mounted(){
uComponents.showLoading(this);
resolve(this);
let ulistDom = this.$refs.ulist.$el;
console.log(ulistDom);
let self = this;
ulistDom.onscroll = function () {
console.log(ulistDom.offsetHeight+' '+ulistDom.offsetTop);
console.log(ulistDom.scrollTop);
console.log(ulistDom.scrollHeight);
let sum = ulistDom.offsetHeight+ulistDom.scrollTop;
console.log(sum);
//滑到底了
if(sum == ulistDom.scrollHeight){
self.refreshDisabled = false;
ulistDom.style.overflow = 'hidden';
}
}
},
methods:{
getList(){
......@@ -94,7 +78,8 @@ function initComponentsConfig() {
class: 'custom-list',
list: [],
tip: Vue.t('hijackRecord.noRecordTip'),
// pagesize: PAGE_SIZE
pagesize: PAGE_SIZE,
pullup: true
}
},
dialog: {
......@@ -106,20 +91,13 @@ function initComponentsConfig() {
initParam: {
class: 'custom-loading'
}
},
refresh: {
initParam: {
text: ['下拉刷新','松开加载','正在刷新','刷新成功'],
class: 'custom-refersh',
pullUp: false
}
}
}
}
function resolve(self) {
self.setDeviceId(iot.navigator.getExtras().deviceId);
uComponents.showLoading(self);
//
iot.business.api.sendCustom('lock/getHistoryRecord',
{
data: {
......@@ -167,16 +145,6 @@ function initComponentsConfig() {
self.setStartId(record[record.length-1].id);
}
//更新列表数据
uComponents.hideRefresh(self);
let ulistDom = self.$refs.ulist.$el;
let sum = ulistDom.offsetHeight+ulistDom.scrollTop;
//滑到底了
ulistDom.style.overflow = 'auto';
self.refreshDisabled = true;
// if(sum != ulistDom.scrollHeight){
// ulistDom.style.overflow = 'auto';
// self.refreshDisabled = true;
// }
uComponents.changeList(self, self.getList());
}else{
}
......
dev/src/view/device/v_opendoorRecord.js
......@@ -14,7 +14,7 @@ import {iot, uPublic, uComponents} from '../../public/public.js';
iot.ready(init);
function init() {
//通用 list、dialog、loading组件
uPublic.componentsInit(['u-list','u-dialog','u-loading','u-refresh']);
uPublic.componentsInit(['u-list','u-dialog','u-loading']);
uPublic.closeSlideBack();
const app = new Vue({
data:{
......@@ -24,28 +24,11 @@ function init() {
startId: 0,
deviceId: null,
userInfo: [],
flag: true,
refreshDisabled: false
flag: true
},
mounted(){
mounted(){
uComponents.showLoading(this);
resolve(this);
let ulistDom = this.$refs.ulist.$el;
console.log(ulistDom);
let self = this;
// ulistDom.onscroll = function () {
//
// console.log(ulistDom.offsetHeight+' '+ulistDom.offsetTop);
// console.log(ulistDom.scrollTop);
// console.log(ulistDom.scrollHeight);
//
// let sum = ulistDom.offsetHeight+ulistDom.scrollTop;
// console.log(sum);
// //滑到底了
// if(sum == ulistDom.scrollHeight){
// self.refreshDisabled = false;
// ulistDom.style.overflow = 'hidden';
// }
// }
},
methods:{
getList(){
......@@ -73,7 +56,7 @@ function init() {
this.deviceId = id;
},
onListLoadTap(){
// listLoadTap(this);
listLoadTap(this);
},
onRefreshFresh(){
refreshFresh(this);
......@@ -94,7 +77,8 @@ function initComponentsConfig() {
class: 'custom-list',
list: [],
tip: Vue.t('opendoorRecord.noRecordTip'),
// pagesize: PAGE_SIZE
pagesize: PAGE_SIZE,
pullup: true
}
},
dialog: {
......@@ -106,13 +90,6 @@ function initComponentsConfig() {
initParam: {
class: 'custom-loading'
}
},
refresh: {
initParam: {
text: ['下拉刷新','松开加载','正在刷新','刷新成功'],
class: 'custom-refersh',
pullUp: false
}
}
}
}
......@@ -120,7 +97,7 @@ function initComponentsConfig() {
//调用接口获取开门记录
function resolve(self) {
console.log("in");
uComponents.showLoading(self);
// uComponents.showLoading(self);
self.setDeviceId(iot.navigator.getExtras().deviceId);
console.log(iot.navigator.getExtras());
if(iot.navigator.getExtras().relId){
......@@ -232,23 +209,8 @@ function setListData(self, response){
self.setStartId(record[record.length-1].id);
}
//更新列表数据
uComponents.hideRefresh(self);
self.$refs.urefresh.refreshDisabled = true;
// let ulistDom = self.$refs.ulist.$el;
// let sum = ulistDom.offsetHeight+ulistDom.scrollTop;
//滑到底了
// ulistDom.style.overflow = 'auto';
// self.refreshDisabled = true;
// if(sum != ulistDom.scrollHeight){
// ulistDom.style.overflow = 'auto';
// self.refreshDisabled = true;
// }
uComponents.changeList(self, self.getList());
console.log("in");
}else{
}
}
function refreshFresh(self){
resolve(self);
}
\ No newline at end of file
web/lib/less/device/recordList.less
......@@ -4,11 +4,11 @@
.u-list();
.custom-list{
// position: absolute;
// top: 44px;
// bottom: 0;
// left: 0;
// height: auto;
position: absolute;
top: 44px;
bottom: 0;
left: 0;
height: auto;
.u-list-scroll .u-list-row{
height: 75px;
padding: 0 38px 0 41px;
......@@ -33,113 +33,39 @@
}
.u-list-load{
.listLoad();
.u-list-load-animation{
width: 24px;
height: 24px;
display: inline-block;
.bgImg("loading.png");
-webkit-animation: refresh 1s steps(8, end) infinite;
animation: refresh 1s steps(8, end) infinite;
background-size: cover;
vertical-align: middle;
}
}
.u-list-tip{
.listNoCont();
}
}
.custom-refersh{
width: 100%;
height: 100%;
position: absolute;
// top: 1.173rem;
bottom: 0;
left: 0;
}
.custom-refersh .u-refresh-content{
width: 100%;
height: 100%;
/*-webkit-transform: translateY(-50px);
transform: translateY(-50px);*/
}
.custom-refersh .refreshContent{
width: 100%;
height: 100%;
background: lightblue;
}
.custom-refersh .u-refresh-pullUp-text{
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
display: inline-block;
}
.custom-refersh .u-refresh-dropDown-text{
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
display: inline-block;
}
.custom-refersh .u-refresh-icon{
/*width: 26px;
height: 26px;
display: inline-block;
-webkit-animation: uLoading 1s steps(12, end) infinite;
animation: refresh 1s steps(12, end) infinite;
background-image: url(../resources/image/loading.png);
background-size: cover;
vertical-align: middle;*/
display: none;
}
@-webkit-keyframes refresh {
0% {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
}
}
}
@keyframes refresh {
0% {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
}
}
.u-refresh-status-0 .u-refresh-icon{
width: 26px;
height: 26px;
display: inline-block;
/*background-image: url(../resources/image/arrow.png);*/
/*background-size: cover;
transition: transform 0.6s;*/
}
.u-refresh-status-1 .u-refresh-icon{
width: 26px;
height: 26px;
display: inline-block;
/*background-image: url(../resources/image/arrow.png);*/
/*background-size: cover;*/
/*transform: rotate(180deg);*/
/*transition: transform 0.6s;*/
}
.u-refresh-status-2 .u-refresh-icon{
width: 26px;
height: 26px;
display: inline-block;
-webkit-animation: uLoading 1s steps(12, end) infinite;
animation: refresh 1s steps(12, end) infinite;
background-image: url(../../resources/image/white_loading_icon.png);
background-size: cover;
vertical-align: middle;
}
.u-refresh-status-3 .u-refresh-icon{
display: none;
}
}
\ No newline at end of file
web/view/device/alarmInfo.html
......@@ -25,10 +25,7 @@
<v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>
<p>{{ $t('title.alarmInfo') }}</p>
</div>
<u-refresh ref="urefresh" :disabled="refreshDisabled" :init-param="componentsConfig.refresh.initParam"
v-on:u-refresh-fresh = "onRefreshFresh">
<u-list ref="ulist" :init-param="componentsConfig.alarmInfoList.initParam" v-on:u-list-load-tap="onListLoadTap()"></u-list>
</u-refresh>
<u-list ref="ulist" :init-param="componentsConfig.alarmInfoList.initParam" v-on:u-list-load-tap="onListLoadTap()"></u-list>
<u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
<u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
</div>
......
web/view/device/hijackRecord.html
......@@ -25,10 +25,7 @@
<v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>
<p>{{ $t('title.hijackRecord') }}</p>
</div>
<u-refresh ref="urefresh" :disabled="refreshDisabled" :init-param="componentsConfig.refresh.initParam"
v-on:u-refresh-fresh = "onRefreshFresh">
<u-list ref="ulist" :init-param="componentsConfig.hijackRecordList.initParam" v-on:u-list-load-tap="onListLoadTap()"></u-list>
</u-refresh>
<u-list ref="ulist" :init-param="componentsConfig.hijackRecordList.initParam" v-on:u-list-load-tap="onListLoadTap()"></u-list>
<u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
<u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
</div>
......
web/view/device/opendoorRecord.html
......@@ -25,10 +25,7 @@
<v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>
<p>{{ $t('title.opendoorRecord') }}</p>
</div>
<u-refresh ref="urefresh" :disabled="refreshDisabled" :init-param="componentsConfig.refresh.initParam"
v-on:u-refresh-fresh = "onRefreshFresh">
<u-list ref="ulist" :init-param="componentsConfig.opendoorRecordList.initParam" v-on:u-list-load-tap="onListLoadTap()"></u-list>
</u-refresh>
<u-list ref="ulist" :init-param="componentsConfig.opendoorRecordList.initParam" v-on:u-list-load-tap="onListLoadTap()"></u-list>
<u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
<u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
</div>
......
web/view/device/recordList.css
......@@ -532,6 +532,14 @@ p {
text-align: center;
}
.custom-list {
position: absolute;
top: 1.173rem;
bottom: 0;
left: 0;
height: auto;
}
.custom-list .u-list-scroll .u-list-row {
height: 2rem;
padding: 0 1.013rem 0 1.093rem;
......@@ -569,6 +577,17 @@ p {
line-height: 0.933rem;
}
.custom-list .u-list-load .u-list-load-animation {
width: 0.64rem;
height: 0.64rem;
display: inline-block;
background-image: url("../../resources/image/loading.png");
-webkit-animation: refresh 1s steps(8, end) infinite;
animation: refresh 1s steps(8, end) infinite;
background-size: cover;
vertical-align: middle;
}
.custom-list .u-list-tip {
background-image: url("../../resources/image/noCont.png");
background-position: top center;
......@@ -580,55 +599,6 @@ p {
padding-top: 2.347rem;
}
.custom-refersh {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.custom-refersh .u-refresh-content {
width: 100%;
height: 100%;
/*-webkit-transform: translateY(-50px);
transform: translateY(-50px);*/
}
.custom-refersh .refreshContent {
width: 100%;
height: 100%;
background: lightblue;
}
.custom-refersh .u-refresh-pullUp-text {
width: 100%;
height: 1.333rem;
text-align: center;
line-height: 1.333rem;
display: inline-block;
}
.custom-refersh .u-refresh-dropDown-text {
width: 100%;
height: 1.333rem;
text-align: center;
line-height: 1.333rem;
display: inline-block;
}
.custom-refersh .u-refresh-icon {
/*width: 26px;
height: 26px;
display: inline-block;
-webkit-animation: uLoading 1s steps(12, end) infinite;
animation: refresh 1s steps(12, end) infinite;
background-image: url(../resources/image/loading.png);
background-size: cover;
vertical-align: middle;*/
display: none;
}
@-webkit-keyframes refresh {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
......@@ -651,38 +621,4 @@ p {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
}
}
.u-refresh-status-0 .u-refresh-icon {
width: 0.693rem;
height: 0.693rem;
display: inline-block;
/*background-image: url(../resources/image/arrow.png);*/
/*background-size: cover;
transition: transform 0.6s;*/
}
.u-refresh-status-1 .u-refresh-icon {
width: 0.693rem;
height: 0.693rem;
display: inline-block;
/*background-image: url(../resources/image/arrow.png);*/
/*background-size: cover;*/
/*transform: rotate(180deg);*/
/*transition: transform 0.6s;*/
}
.u-refresh-status-2 .u-refresh-icon {
width: 0.693rem;
height: 0.693rem;
display: inline-block;
-webkit-animation: uLoading 1s steps(12, end) infinite;
animation: refresh 1s steps(12, end) infinite;
background-image: url(../../resources/image/white_loading_icon.png);
background-size: cover;
vertical-align: middle;
}
.u-refresh-status-3 .u-refresh-icon {
display: none;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment