<template>
<view class="logs">
<AtNoticebar marquee v-if="isState">
网络连接不可用
</AtNoticebar>
<view class="header">
<image class="head-img" />
<text class="username">飞翔的京东鸽</text>
</view>
<AtList class="list">
<AtListItem
v-for="(item, index) in list"
:key="index"
class="list-item"
:title="item.title"
:arrow="item.arrow"
:thumb="item.thumb"
:extraText="item.extraText"
/>
</AtList>
</view>
</template>
<script>
// 按需引入, 更小的应用体积
import { AtNoticebar, AtList, AtListItem } from "taro-ui-vue";
import "taro-ui-vue/dist/style/components/noticebar.scss";
import "taro-ui-vue/dist/style/components/list.scss";
import "taro-ui-vue/dist/style/components/icon.scss";
import "./index.scss";
import { size } from 'lodash';
export default {
components: {
AtNoticebar, AtList, AtListItem
},
data() {
return {
msg: "Hello world!",
list: [
{
title: '企业钱包',
arrow: 'right',
thumb: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
extraText: ''
},
{
title: '融资产品',
arrow: 'right',
thumb: 'http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
extraText: ''
},
{
title: '客服中心',
arrow: 'right',
thumb: 'http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
extraText: ''
},
{
title: '隐私政策',
arrow: 'right',
thumb: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
extraText: ''
},
{
title: '隐私政策',
arrow: '',
thumb: 'http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
extraText: ''
},
{
title: '账户注销',
arrow: '',
thumb: 'http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
extraText: '不可恢复,请谨慎操作'
}
],
isState: false, // 判断是否有网络
T: '' // 定时器
};
},
watch: {
isState () {
return this.loopState()
}
},
methods: {
loopState () {
this.T = setInterval(() => {
if (window.navigator.onLine) {
clearInterval(this.T)
this.isState = false
console.log('有网络')
} else {
this.isState = true
console.log('没有网络')
}
}, 1000)
}
},
mounted () {
this.loopState()
}
};
</script>