开始

image.png
和我们前面封装的公共列表很像
image.png
这里有一个天
image.png
还有这一条线。
image.png

组件components文件夹下新建目录和文件
image.png
把common-list这个组件复制的代码复制过来。
image.png
新建一个list.css作为公共的css
image.png
把common-list这个组件内的css都复制到公共的css内。
image.png

  1. .common-list {
  2.         padding: 20upx;
  3.     }
  5.     .common-list-l {
  6.         flex-shrink: 0;
  7.     }
  9.     .common-list-l image {
  10.         width: 90upx;
  11.         height: 90upx;
  12.         border-radius: 100%;
  13.     }
  15.     .common-list-r {
  16.         flex: 1;
  17.         margin-left: 15upx;
  18.         border-bottom: 1upx solid #EEEEEE;
  19.         padding-bottom: 10upx;
  20.     }
  22.     .common-list-r>view:nth-child(3)>image {
  23.         width: 100%;
  24.         border-radius: 10upx;
  25.     }
  27.     .common-list-r>view:nth-child(1)>view:first-child {
  28.         color: #999999;
  29.         color: 30upx;
  30.     }
  32.     .common-list-r>view:nth-child(1)>view:last-child {
  33.         background: #EEEEEEE;
  34.         padding: 0 10upx;
  35.         font-size: 32upx;
  36.     }
  40.     .common-list-r>view:nth-child(2) {
  41.         font-size: 32upx;
  42.         padding: 12upx 0;
  43.     }
  45.     .common-list-r>view:nth-child(3) {
  46.         position: relative;
  47.         margin-bottom: 10upx;
  48.     }
  50.     .common-list-play,
  51.     .common-list-playinfo {
  52.         position: absolute;
  53.         color: #FFFFFF;
  54.     }
  56.     .common-list-play {
  57.         font-size: 130upx;
  58.     }
  60.     .common-list-playinfo {
  61.         right: 10upx;
  62.         bottom: 10upx;
  63.         background: rgba(51, 51, 51, 0.73);
  64.         border-radius: 20upx;
  65.         padding: 0 20upx;
  66.         font-size: 26upx;
  67.     }
  69.     .common-list-r>view:nth-child(4)>view {
  70.         color: #AAAAAA;
  71.     }
  73.     .common-list-r>view:nth-child(4)>view:nth-child(2)>view {
  74.         margin-left: 10upx;
  75.         padding-left: 5upx;
  76.         font-size: 28upx;
  77.     }
  79.     .common-list-share {
  80.         background: #EEEEEE;
  81.         /* border: 1upx solid; */
  82.         width: 100%;
  83.         padding: 10upx;
  84.         border-radius: 10upx;
  85.     }
  87.     .common-list-share>image {
  88.         width: 200upx;
  89.         height: 150upx;
  90.         margin-right: 10upx;
  91.     }

image.png
common-list组件内引用公共的list.css
image.png
details-info组件也引入这个css
image.png
最新的HBuilder的引用方式是下面这种。

  1. @import url('@/common/list.css');

原有页面不变。没有引起错误
image.png
details页面引入组件。
image.png

  1. <detail-info :item=""></detail-info>
  4. import detailInfo from '@/components/detail/detail-info.vue';

组件内修改，这个组件可以不要了
image.png
填充数据。复制news页面内的数据
image.png
复制到details页面
image.png

  1. detail: {
  2.                             userpic: "../../static/demo/userpic/12.jpg",
  3.                             username: "哈哈",
  4.                             sex: 0, //0 男 1 女
  5.                             age: 25,
  6.                             isguanzhu: false,
  7.                             title: "我是标题",
  8.                             titlepic: "../../static/demo/datapic/13.jpg",
  9.                             video: false,
  10.                             share: false,
  11.                             path: "深圳 龙岗",
  12.                             sharenum: 20,
  13.                             commentnum: 30,
  14.                             goodnum: 20
  15.                         }

传入组件。
image.png

这个时候会出现一些错误
image.png
错误主要是这个组件的路径问题，现在修复。
image.png

  1. import tagSexAge from '@/components/common/tag-sex-age.vue';

点击详情
image.png

图文的数据

  1. {
  2.                             userpic: "../../static/demo/userpic/12.jpg",
  3.                             username: "哈哈",
  4.                             sex: 0, //0 男 1 女
  5.                             age: 25,
  6.                             isguanzhu: false,
  7.                             title: "我是标题",
  8.                             titlepic: "../../static/demo/datapic/13.jpg",
  9.                             video: false,
  10.                             share: false,
  11.                             path: "深圳 龙岗",
  12.                             sharenum: 20,
  13.                             commentnum: 30,
  14.                             goodnum: 20
  15.                         }

最下面的一条线要求 放在最外面
image.png

  1. <style scoped>
  2.     @import url('@/common/list.css');
  3.     .common-list-r{
  4.         border-bottom: 0;
  5.     }
  6.     .common-list{
  7.         border-bottom: 1upx solid #EEEEEE;
  8.     }
  9. </style>

让这几个单独占一行。下面加一行时间
image.png
添加一行时间
image.png

  1. <view class="common-list-r-time">26天前</view>

时间的样式
image.png
上下的边距是15 左右是0。 然后是字体颜色和大小。
image.png

  1. .common-list-r-time{
  2.         padding: 15upx 0;
  3.         color: #CCCCCC;
  4.         font-size: 25upx;
  5.     }

image.png
外面再嵌套一个view
image.png

image.png

  1. <view>
  2.                 <view class="u-f-ac u-f-jsb">
  3.                     <view class="u-f-ac">
  4.                         {{item.username}}
  5.                         <tag-sex-age :sex="item.sex" :age="item.age"></tag-sex-age>
  6.                     </view>
  7.                     <view v-show="!isguanzhu" class="icon iconfont icon-zengjia" @tap="guanzhu">关注</view>
  8.                 </view>
  9.                 <view class="common-list-r-time">26天前</view>
  10.             </view>

image.png
复制公共的样式过来修改
image.png

  1. .common-list-r>view:nth-child(1)>view:first-child {
  2.         color: #999999;
  3.         color: 30upx;
  4.     }
  6.     .common-list-r>view:nth-child(1)>view:last-child {
  7.         background: #EEEEEEE;
  8.         padding: 0 10upx;
  9.         font-size: 32upx;
  10.     }

因为我们又嵌套了一层view 所以要再加上一层
image.png

  1. .common-list-r>view:nth-child(1)>view:nth-child(1)>view:first-child {
  2.         color: #999999;
  3.         color: 30upx;
  4.     }
  6.     .common-list-r>view:nth-child(1)>view:nth-child(1)>view:last-child {
  7.         background: #EEEEEEE;
  8.         padding: 0 10upx;
  9.         font-size: 32upx;
  10.     }

上面没有问题了。就差下面
image.png

image.png

  1. .common-list-r-time{
  2.         padding: 15upx 0;
  3.         color: #CCCCCC!important;
  4.         font-size: 25upx;
  5.         background: #FFFFFF;
  6.     }

image.png

image.png

  1. .common-list-r-time{
  2.         padding: 15upx 0;
  3.         color: #CCCCCC!important;
  4.         font-size: 25upx;
  5.         background: #FFFFFF!important;
  6.     }

image.png

图片事件

加一个属性，表示上传的时候的多张图片的效果。titlepic就表示 下面的数组的默认的第一个。
image.png

  1. morepic:["../../static/demo/datapic/13.jpg"],

图片改成循环 图片的数组
image.png

  1. <block v-for="(pic,index) in item.morepic" :key="index">
  2.                     <image
  3.                     :src="pic" 
  4.                     mode="widthFix" 
  5.                     lazy-load="true">
  6.                     </image>
  7.                 </block>

image.png
图片加点击事件
image.png

  1. @tap="imgdetail"

传index过去。
image.png

  1. @tap="imgdetail(index)"

image.png

image.png

image.png

  1. imgdetail(index){
  2.                     uni.previewImage({
  3.                         current:index,
  4.                         urls:this.item.morepic
  5.                     })
  6.                 }

image.png
点击图片后，被单独的放大了。
image.png
多加几张图片
image.png

  1. morepic:["../../static/demo/datapic/13.jpg","../../static/demo/datapic/12.jpg"],

image.png
图片竖直方向展示
image.png

  1. <view class="u-f-ajc" style="flex-direction: column;">

image.png
可以左右滑动
image.png
图片加点边距
image.png

  1.     <image
  2.                     :src="pic" 
  3.                     mode="widthFix"
  4.                     style="margin-bottom: 15upx;"
  5.                     lazy-load="true" @tap="imgdetail(index)">
  6.                     </image>

image.png
改成20upx间距
image.png

  1. style="margin-bottom: 20upx;"

image.png

视频的展示，后续对接api接口的时候再去展示。

本节代码

detail-info.vue组件

  1. <template>
  2.     <view class="common-list u-f animated fadeInLeft faster">
  3.         <view class="common-list-l">
  4.             <image :src="item.userpic" mode="widthFix" lazy-load="true"></image>
  5.         </view>
  6.         <view class="common-list-r">
  7.             <view>
  8.                 <view class="u-f-ac u-f-jsb">
  9.                     <view class="u-f-ac">
  10.                         {{item.username}}
  11.                         <tag-sex-age :sex="item.sex" :age="item.age"></tag-sex-age>
  12.                     </view>
  13.                     <view v-show="!isguanzhu" class="icon iconfont icon-zengjia" @tap="guanzhu">关注</view>
  14.                 </view>
  15.                 <view class="common-list-r-time">26天前</view>
  16.             </view>
  17.             <view class="">{{item.title}}</view>
  18.             <view class="u-f-ajc" style="flex-direction: column;">
  19.                 <!-- 图片 -->
  20.                 <block v-for="(pic,index) in item.morepic" :key="index">
  21.                     <image
  22.                     :src="pic" 
  23.                     mode="widthFix"
  24.                     style="margin-bottom: 20upx;"
  25.                     lazy-load="true" @tap="imgdetail(index)">
  26.                     </image>
  27.                 </block>
  29.                 <!-- 视频 -->
  30.                 <template v-if="item.video">
  31.                     <view class="common-list-play icon iconfont icon-bofang"></view>
  32.                     <view class="common-list-playinfo">
  33.                         {{item.video.looknum}} 次播放 {{item.video.long}}
  34.                     </view>
  35.                 </template>
  36.                 <!-- 分享 -->
  37.                 <view v-if="item.share" class="common-list-share u-f-ac">
  38.                     <image :src="item.share.titlepic" mode="widthFix" lazy-load="true">
  39.                     </image>
  40.                     <view class="">{{item.share.title}}</view>
  41.                 </view>
  42.             </view>
  43.             <view class="u-f-ajc u-f-jsb">
  44.                 <view class="">{{item.path}}</view>
  45.                 <view class="u-f-ac">
  46.                     <view class="icon iconfont icon-zhuanfa">
  47.                         {{item.sharenum}}
  48.                     </view>
  49.                     <view class="icon iconfont icon-pinglun1">
  50.                         {{item.commentnum}}
  51.                     </view>
  52.                     <view class="icon iconfont icon-dianzan1">
  53.                         {{item.goodnum}}
  54.                     </view>
  55.                 </view>
  56.             </view>
  57.         </view>
  58.     </view>
  59. </template>
  61. <script>
  62.     import tagSexAge from '@/components/common/tag-sex-age.vue';
  63.     export default {
  64.             components:{
  65.                 tagSexAge
  66.             },
  67.             props:{
  68.                 item:Object
  69.             },
  70.             data() {
  71.                 return {
  72.                     isguanzhu: this.item.isguanzhu
  73.                 }
  74.             },
  75.             methods:{
  76.                 guanzhu(){
  77.                     this.isguanzhu=true;
  78.                     uni.showToast({
  79.                         title: '关注成功',
  80.                     });
  81.                 },
  82.                 imgdetail(index){
  83.                     uni.previewImage({
  84.                         current:index,
  85.                         urls:this.item.morepic
  86.                     })
  87.                 }
  88.             }
  89.         }
  90. </script>
  92. <style scoped>
  93.     @import url('@/common/list.css');
  94.     .common-list-r{
  95.         border-bottom: 0;
  96.     }
  97.     .common-list{
  98.         border-bottom: 1upx solid #EEEEEE;
  99.     }
  100.     .common-list-r-time{
  101.         padding: 15upx 0;
  102.         color: #CCCCCC!important;
  103.         font-size: 25upx;
  104.         background: #FFFFFF!important;
  105.     }
  106.     .common-list-r>view:nth-child(1)>view:nth-child(1)>view:first-child {
  107.         color: #999999;
  108.         color: 30upx;
  109.     }
  111.     .common-list-r>view:nth-child(1)>view:nth-child(1)>view:last-child {
  112.         background: #EEEEEEE;
  113.         padding: 0 10upx;
  114.         font-size: 32upx;
  115.     }
  116. </style>

detail.vue页面

  1. <template>
  2.     <view>
  3.         <detail-info :item="detail"></detail-info>
  4.     </view>
  5. </template>
  7. <script>
  8.     import detailInfo from '@/components/detail/detail-info.vue';
  9.     export default {
  10.         components: {
  11.             detailInfo
  12.         },
  13.         data() {
  14.             return {
  15.                 detail: {
  16.                     userpic: "../../static/demo/userpic/12.jpg",
  17.                     username: "哈哈",
  18.                     sex: 0, //0 男 1 女
  19.                     age: 25,
  20.                     isguanzhu: false,
  21.                     title: "我是标题",
  22.                     titlepic: "../../static/demo/datapic/13.jpg",
  23.                     morepic:["../../static/demo/datapic/13.jpg","../../static/demo/datapic/12.jpg"],
  24.                     video: false,
  25.                     share: false,
  26.                     path: "深圳 龙岗",
  27.                     sharenum: 20,
  28.                     commentnum: 30,
  29.                     goodnum: 20
  30.                 }
  31.             }
  32.         },
  33.         onLoad(e) {
  34.             // console.log(e.detailDate);
  35.             this.initdata(JSON.parse(e.detailDate));
  36.         },
  37.         // 监听导航右边按钮
  38.         onNavigationBarButtonTap(e) {
  39.             // console.log(e);
  40.             if (e.index == 0) {
  41.                 console.log("分享");
  42.             }
  43.         },
  44.         methods: {
  45.             // 初始化数据
  46.             initdata(obj) {
  47.                 console.log('拿到标题：', obj);
  48.                 uni.setNavigationBarTitle({
  49.                     title: obj.title
  50.                 })
  51.             }
  52.         }
  53.     }
  54. </script>
  56. <style>
  58. </style>

结束