118 lines
3.3 KiB
Vue
118 lines
3.3 KiB
Vue
<script setup>
|
|
// 引入依赖
|
|
// import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
|
|
// import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
|
|
import { onLoad,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
|
|
// import mySwiper from "@/components/mySwiper.vue"
|
|
import {ref,onMounted,nextTick} from "vue"
|
|
import {useStore} from '@/store/index.js'
|
|
import api from "@/api/index"
|
|
// 生命周期
|
|
onLoad(() => {
|
|
getList()
|
|
})
|
|
// 下拉刷新
|
|
onPullDownRefresh(()=>{
|
|
init()
|
|
getList()
|
|
// setTimeout(function () {
|
|
// uni.stopPullDownRefresh();
|
|
// }, 1000);
|
|
})
|
|
// 上拉触底
|
|
onReachBottom(()=>{
|
|
queryParams.value.page ++
|
|
getList()
|
|
})
|
|
// 变量
|
|
const queryParams = ref({
|
|
page:1,
|
|
pageSize:10
|
|
})
|
|
const list = ref([
|
|
{
|
|
id:1,
|
|
cover_img:'https://gwjxb.oss-cn-chengdu.aliyuncs.com/logo.png',
|
|
title:'金秋相逢 共叙合作',
|
|
reading_num:100,
|
|
content:`
|
|
新华社北京10月18日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
|
|
春发其华，秋收其实。
|
|
共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
|
|
`
|
|
},
|
|
{
|
|
id:2,
|
|
cover_img:'https://ms.bdimg.com/pacific/0/pic/1083217647_-478899572.png?x=0&y=0&h=340&w=510&vh=340.00&vw=510.00&oh=340.00&ow=510.00',
|
|
title:'金秋相逢 共叙合作',
|
|
reading_num:100,
|
|
content:`
|
|
新华社北京10月18日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
|
|
春发其华，秋收其实。
|
|
共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
|
|
`
|
|
}
|
|
])
|
|
// 方法
|
|
function init() {
|
|
queryParams.page = 1
|
|
queryParams.pageSize = 10
|
|
}
|
|
async function getList(){
|
|
const res = await api.getArticleList(queryParams.value)
|
|
}
|
|
function toDetail(item) {
|
|
let info = encodeURIComponent(JSON.stringify(item))
|
|
// console.log(info)
|
|
uni.navigateTo({
|
|
url:"./detail?info="+info+"&id="+item.id
|
|
})
|
|
}
|
|
</script>
|
|
<template>
|
|
<view class="articleBox page-box">
|
|
<view class="userInfoBox">
|
|
|
|
</view>
|
|
<view class="list-box">
|
|
<view class="lb-card" v-for="(item,i) in list" @tap="toDetail(item)">
|
|
<view class="lb-left">
|
|
<image :src="item.cover_img" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="lb-right">
|
|
<view class="lb-title">{{item.title}}</view>
|
|
<view class="lb-content text-ellipsis-1 small-text">{{item.content}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.articleBox{
|
|
.list-box{
|
|
.lb-card{
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
border-bottom: 2rpx solid #eaeaea;
|
|
.lb-left{
|
|
image{
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
.lb-right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.lb-title{
|
|
font-weight: 900;
|
|
font-size:32rpx ;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |