uni-app前端开发(二)新闻功能

新闻功能

1.新闻列表

首先要在页面的onLoad函数中添加请求初始化分页获取新闻列表

1.1逻辑层

<script>
    // 此处将方法抽取到了/common/method.js中
	import {
    fail,checkToken} from '../../common/method.js'
	import refresh from '@/static/refresh.png'
	export default {
    
        data() {
    
			return {
    
				newsList: [],
				pageNo: 1,
				pageCount: 1,
			}
		},
        methods: {
    
			getData(save = false) {
    	// 根据save值判断是第一页还是加载更多，默认false第一页
				const _this = this;
				uni.request({
    
					url: 'http://zhilianit.cn:8080/bwl/news/etNews/list',
					method: 'GET',
					data: {
    
						pageNo: _this.pageNo,
						pageSize: 10
					},
					header: {
     // 请求头
						"X-Access-Token": uni.getStorageSync("token")
					},
					success({
    data}) {
    	// 请求成功
						if (data.success) {
     	// 写入数据，save表示是否保存当前数据
							_this.write({
    save:save,data:data.result})
						} else {
    				// 判断是否token失效，弹出错误信息
							checkToken(data.message);
						}
					},
					fail() {
    
						
					},
					complete() {
    
                        
					}
				})
			}
			write({
    save,data}){
    
				if (save) {
    
					this.newsList = this.newsList.concat(data.records);
				} else {
    
					this.newsList = data.records;
				}
				this.pageCount = data.pages;
			}
		},
		onLoad({
    data}) {
    
			this.getData();
		}
    }
</script>

1.2显示层

<template>
	<view>
		<u-cell-group>	<!-- 通过v-for循环遍历列表，vue v-for循环时要给元素key唯一的值，确定其唯一性 -->
			<u-cell-item :title="item.title" v-for="(item,index) in newsList" :key="index" @tap="nav(item.id)" :center="true"></u-cell-item>
		</u-cell-group>
	</view>
</template>

2.阅读新闻

2.1 给新闻添加单击事件

<template>
	<view>
		<u-cell-group>
			<u-cell-item :title="item.title" v-for="(item,index) in newsList" :key="index" @tap="nav(item.id)" :center="true"></u-cell-item>
		</u-cell-group>
		<u-loadmore :status="status"></u-loadmore>
		<u-image class="refresh" :src="refresh" width="80rpx" height="80rpx" @tap="fresh"></u-image>
	</view>
</template>

2.2 添加单击方法nav

<script>
	export default {
    
		methods: {
    
			nav(id) {
    	// 跳转到新闻详情页面
				uni.navigateTo({
    
					url: './read?id=' + id
				})
			}
		}
	}
</script>

2.3 编写新闻详情页

<template>
	<view class="page">
		<view class="title">{
  {info.title}}</view>
		<view class="theme">作者：{
  {info.author}}&nbsp;{
  {info.createTime}}</view>
		<view class="content">
			<u-parse :html="info.content