unicloud23-小案例9 列表页跳转到详情页及样式

新建详情页

删除功能之前up主说在首页做，现在移到详情页来做

新建detail页面，进入详情页需要在首页点击新闻后进入，所以需要给新闻添加点击事件进行跳转

点击进入详情页需要带参数进行跳转，携带的参数就是被选中的新闻的id

<view @click="goDetail(item._id)" class="item" v-for="item in listArr" :key="item._id">

methods: {
      // 点击新闻跳转到详情页
      goDetail(e){
        console.log(e);
      },

这里的e就是标签传过来的item._id，就是这条新闻的id，在详情页接收到这个参数之后，去获取这一条数据的内容渲染到详情页面

跳转到详情页

methods: {
      // 点击新闻跳转到详情页
      // e就是标签点击后传过来的被点击新闻的id
      goDetail(e){
        console.log(e);
        uni.navigateTo({
          url:"/pages/detail/detail?id="+e
        })
      },

在进入详情页之后，同时拿到了首页传递的参数

这个id在首页可以直接看到，不知道会不会有安全风险

写详情页的布局

把修改和删除功能写在这个页面中

<template>
  <view class="detail">
    <view class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</view>
    <view class="info">
      <text>王五</text>
      <text>2023-02-02 10-10-10</text>
    </view>
    <view class="content">
      这是内容
    </view>
    
    <view class="btnGroup">
      <button size="mini">修改</button>
      <button size="mini" type="warn">删除</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss" scoped>
  .detail {
    padding: 30rpx;
    .title {
      font-size: 50rpx;
      color: #000;
      // 两端对齐-不加这个属性右边离屏幕边沿比较远，与左边不一致
      text-align: justify;
      // 加行高--行高也是有默认值的
      line-height: 1.4em;
    }
    .info {
      font-size: 30rpx;
      color: #666;
      padding: 30rpx 0 60rpx;
      // 给作者和时间加边距拉开距离
      text {
        padding-right: 30rpx;
      }
    }
    .content {
      font-size: 36rpx;
      line-height: 1.4em;
    }
    .btnGroup {
      padding: 50rpx 0;
      button{
        margin-right: 30rpx;
      }
    }
  }
</style>