08.uniapp项目经验

1.image组件图片会伸缩,动态,

  min-width:200rpx;
  max-width:200rpx

2.两行的大小是上下空格的

  flex-direction:column;
  justify-content: space-between;

3.子

  text:nth-child(2){

}

4.日期格式化

    {{item.add_time | formatDate}}
   filter:{
       formatDate(date){
             const nDate=new Date(date);
              const year=nDate.getFullYear();
               const month=nDate.getMonth().toString().padStart(2,0);
                //全部两位,没有的补0
               const day=nDate.getDay().toString().padStart(2,0);
                //满足2位不加
               
             
	return 123;
      }

5.点击对应项到指定的页面(组件调用)(注册点击事件,与父组件通信)

   //在子组件发射事件
    <view @click="navigator(item.id)"></view>
    navigator(id){
          this.$emit("itemClick",id);
     }
    
   //父组件定义,注意是用@不是 :
   <news-item @itemClick="goDetail" > </news-item>

6. 在 onload(options){}可拿到传过来的数据

7. 轮播图

   <swiper>
         <swiper-item v-for="item in xxx" :key="xxx">
	xxxx
       <swiper-item>

  </swiper>

8.分割线不一定是全是背景

9.把数据是html的显示出来

  <rich-text :nodes="xxx"><rich-text>  
   //但是图片没有全部显示出来
    //他一定会给一个class改属性,但是改不行,得放在全局 App.vue
     .img{
       width:xxxpx;
       heigh:auto;  //图片高自动调整

    }

10.底部导航 GoodsNav导航,层级关系