<!-- 网信信息列表 --> <template> <view class="message-list"> <view class="tab-area"> <u-tabs :list="tabList" :scrollable="false" :current="currentTab" lineColor="#0096e0" lineWidth="50" lineHeight="5" @click="clickTab"> </u-tabs> </view> <view class="event-area"> <EventList :list="eventList"/> </view> <u-loadmore :status="status" /> <!-- 返回顶部 --> <u-back-top :scroll-top="scrollTop" icon="arrow-up" ></u-back-top> </view> </template> <script> import EventList from '../../components/index/eventList.vue'; import { getLocationParams } from '../../common/utils.js'; export default { name: 'MessageList', components: { EventList }, data() { return { scrollTop: 0, currentTab: '0', //当前选中的标签的索引 status: 'nomore', //上滑加载状态 loading加载中,nomore没有更多了 tabList: [ { name: '法律法规' }, { name: '工作动态' }, { name: '网络辟谣' }, ], eventList: [{ title: '法律法规', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '法律法规法律法规法律法规法律法规', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '法律法规法律法规法律法规法律法规', time: '2121-12-12 12:02:20', img: '../../static/share.png' },], //事件数据 } }, mounted() { this.currentTab = getLocationParams('tabIndex'); this.clickTab(null, this.currentTab); }, // 监听滚动条位置 onPageScroll(e) { this.scrollTop = e.scrollTop; }, //下拉刷新 onPullDownRefresh() { console.log('refresh'); setTimeout(function () { uni.stopPullDownRefresh(); }, 1000); }, //上滑加载 onReachBottom() { }, methods: { clickTab(val, currentTab) { console.log(val) if((val && val.index === 0) || currentTab === '0') { this.eventList = [ { title: '法律法规', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '法律法规法律法规法律法规法律法规', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '法律法规法律法规法律法规法律法规', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '法律法规', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '法律法规法律法规法律法规法律法规', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '法律法规法律法规法律法规法律法规', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '法律法规', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '法律法规法律法规法律法规法律法规', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '法律法规法律法规法律法规法律法规', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '法律法规', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '法律法规法律法规法律法规法律法规', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '法律法规法律法规法律法规法律法规', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, ] } else if((val && val.index === 1) || currentTab === '1') { this.eventList = [ { title: '工作动态', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '工作动态工作动态工作动态工作动态工作动态工作动态', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '工作动态工作动态工作动态', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, ] } else if((val && val.index === 2) || currentTab === '2') { this.eventList = [ { title: '网络辟谣', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '网络辟谣网络辟谣网络辟谣网络辟谣', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, { title: '网络辟谣网络辟谣网络辟谣', time: '2121-12-12 12:02:20', img: '../../static/share.png' }, ] } } } } </script> <style lang="scss" scoped> .message-list { padding-bottom: 40rpx; .tab-area { padding: 20rpx; background-color: #fff; } } </style>