You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<template> <view class="app"> <mescroll-body ref="mescrollRef" @init="mescrollInit" :top="0" @down="downCallback" :up="upOption" @up="loadList" > <view class="notice-item" v-for="(item, index) in list" :key="index"> <text class="time">{{ item.add_time | friendDate }}</text> <view class="content"> <text class="title">{{ item.name }}</text> <view v-if="item.image" class="img-wrapper"> <image class="pic" :src="item.image" mode="aspectFill"></image> </view> <view class="introduce-wrap" :class="{'has-pic': item.image}"> <text class="introduce">{{ item.content }}</text> </view> <view class="bot b-t" @click="navToDetai(item)"> <text>查看详情</text> <text class="mix-icon icon-you"></text> </view> </view> </view> </mescroll-body> <mix-loading v-if="isLoading" :type="2"></mix-loading> </view> </template>
<script> import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; export default { mixins: [MescrollMixin], data() { return { list: [], upOption:{ auto: false, // 是否自动加载
page: { num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
size: 10 // 每页数据的数量
}, noMoreSize: 6 }, } }, methods: { //加载列表
async loadList(e){ const res = await this.$request('notice', 'getList', { offset: (e.num - 1) * e.size, limit: e.size, }); const curList = res.data; if(e.num === 1){ this.list = []; } this.list = this.list.concat(curList); //追加新数据
this.mescroll.endSuccess(curList.length); //结束加载状态
this.log(curList) }, navToDetai(item){ this.navTo('/pages/public/article?param=' + JSON.stringify({ module: 'notice', operation: 'getDetail', data: { id: item._id } })) }, mescrollInit(mescroll){ this.isLoading = true; this.mescroll = mescroll; this.mescroll.resetUpScroll(false) } } } </script>
<style> page{ background-color: #f7f7f7; } </style> <style lang='scss'> .app { padding-bottom: 30rpx; }
.notice-item { display: flex; flex-direction: column; align-items: center; }
.time { display: flex; align-items: center; justify-content: center; height: 80rpx; padding-top: 10rpx; font-size: 26rpx; color: #7d7d7d; }
.content { width: 710rpx; padding: 0 24rpx; background-color: #fff; border-radius: 12rpx; }
.title { display: flex; align-items: center; height: 90rpx; font-size: 32rpx; color: #303133; font-weight: 700; }
.img-wrapper { width: 100%; height: 280rpx; margin-bottom: 16rpx; position: relative; }
.pic { display: block; width: 100%; height: 100%; border-radius: 6rpx; } .introduce-wrap{ padding-bottom: 20rpx; .introduce { font-size: 28rpx; color: #606266; line-height: 40rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } &.has-pic .introduce{ -webkit-line-clamp: 2; } }
.bot { display: flex; align-items: center; justify-content: space-between; height: 80rpx; font-size: 24rpx; color: #707070; position: relative; }
.icon-you { font-size: 24rpx; } </style>
|