1. <template>
    2.     <view class= 'news'>
    3.       <news-item :list='newslist'></news-item>
    4.     </view>
    5. </template>
    7. <script>
    8.     import newsItem from '../../components/news-item/news-item'
    9.     export default {
    10.         data() {
    11.             return {
    12.                 newslist:[]
    13.             }
    14.         },
    15.         components:{
    16.             "news-item":newsItem
    17.         },
    18.         methods: {
    19.             async getNews (){
    20.                 const res = await this.$myRequest({
    21.                     url:'/api/getnewslist'
    22.                 })
    23.                 this.newslist = res.data.message
    24.                 console.log(this.newslist)
    25.             }
    26.         },
    27.         onLoad(){
    28.             this.getNews()
    29.         }
    30.     }
    31. </script>
    33. <style lang='scss'>
    34. .news{
    36. }
    37. </style>

    这个是new的列表，另外我们可以讲新闻这个页面进行封装

    1. <template>
    2.         <view>
    3.             <view class='news_item' v-for='item in list' :key='item.id'>
    4.                 <image :src='item.img_url'></image>
    5.                 <view class='right'>
    6.                     <view class='tit'>
    7.                         {{item.title}}
    8.                     </view>
    9.                     <view class='info'>
    10.                         <text>发表时间：{{item.add_time}}</text>
    11.                         <text>浏览:{{item.click}}</text>
    12.                     </view>
    13.                 </view>
    14.             </view>
    15.         </view>
    16. </template>
    17. <script>
    18.     export default{
    19.         props:['list']
    20.     }
    21. </script>
    23. <style lang='scss'>
    24. .news_item{
    25.         display: flex;
    26.         padding:10rpx 20rpx;
    27.         border-bottom:1px solid $shop-color;
    28.         image{
    29.             min-width:200rpx;
    30.             max-width: 200rpx;
    31.             height:150rpx;
    32.             border:1px dashed #007AFF;    
    33.         }
    34.         .right{
    35.             margin-left:15rpx;
    36.             display: flex;
    37.             flex-direction: column;
    38.             justify-content: space-between;
    39.             .tit{
    40.                 font-size: 33rpx;
    41.             }
    42.             .info{
    43.                 font-size: 25rpx;
    44.                 text:nth-child(2){
    45.                     margin-left:30rpx;
    46.                 }
    47.             }
    48.         }
    49.     }
    50. </style>

    封装的步骤

    • 在componments的组件文件夹下新建组件
    • 利用props来获取传过来的变量
    • 使用的时候需要导入另外要在组件里面注册