开始

分为上中下，中间是不止四个 是可以滚动的。
image.png
最上面的是蒙版，下面分为三行。中间用的是scroll-view
image.png

  1. <!-- 分享 -->
  2.         <view class="more-share-model"></view>
  3.         <view class="more-share">
  4.             <view class="more-share-title">分享到</view>
  5.             <scroll-view scroll-x class="more-share-body">
  6.                 <view></view>
  7.                 <view></view>
  8.                 <view></view>
  9.                 <view></view>
  10.             </scroll-view>
  11.             <view class="more-share-bottom">
  12.                 取消
  13.             </view>
  14.         </view>

image.png

  1. <!-- 分享 -->
  2.         <view class="more-share-model"></view>
  3.         <view class="more-share">
  4.             <view class="more-share-title">分享到</view>
  5.             <scroll-view scroll-x class="more-share-body">
  6.                 <view class="more-share-item">
  7.                     <view class="icon iconfont icon-weixin"></view>
  8.                     <view>微信</view>
  9.                 </view>
  10.                 <view class="more-share-item">
  11.                     <view class="icon iconfont icon-weixin"></view>
  12.                     <view>微信</view>
  13.                 </view>
  14.                 <view class="more-share-item">
  15.                     <view class="icon iconfont icon-weixin"></view>
  16.                     <view>微信</view>
  17.                 </view>
  18.                 <view class="more-share-item">
  19.                     <view class="icon iconfont icon-weixin"></view>
  20.                     <view>微信</view>
  21.                 </view>
  22.             </scroll-view>
  23.             <view class="more-share-bottom">
  24.                 取消
  25.             </view>
  26.         </view>

样式

fixed布局 ，置于底部。
image.png

  1. .more-share{
  2.         position: fixed;
  3.         bottom: 0;
  4.         left: 0;
  5.         right: 0;
  6.         background: #FFFFFF;
  7.     }

第一行和第三行都是水平垂直方向居中。
image.png

image.png

image.png
第一行和最后一行的
image.png

  1. .more-share-title,.more-share-bottom{
  2.         font-size: 32upx;
  3.         padding: 25upx;
  4.     }

中间。flex布局，不希望换行。
image.png

  1. .more-share-body{
  2.         display: flex;
  3.         white-space: nowrap;
  4.     }

宽度100% ，加个固定的高度。
image.png

  1. .more-share-body{
  2.         display: flex;
  3.         white-space: nowrap;
  4.         width: 100%;
  5.         height: 200upx;
  6.     }

加个边框
image.png

  1. .more-share-body{
  2.         display: flex;
  3.         white-space: nowrap;
  4.         width: 100%;
  5.         height: 200upx;
  6.         border: 1upx solid;
  7.     }

里面的内容 每一个占25%
image.png
水平和垂直居中。
image.png

  1. .more-share-item{
  2.         width: 25%;
  3.         display: inline-flex;
  4.         justify-content: center;
  5.         align-items: center;
  6.     }

image.png

image.png

  1. .more-share-item>view:first-child{
  2.         width: 100upx;
  3.         height: 100upx;
  4.         border-radius: 100%;
  5.         border: 1upx solid;
  6.     }
  7.     .more-share-item>view:last-child{
  8.         color: #7A7A7A;
  9.     }

图标没有水平垂直方向居中，字体也太小了。然后让他们竖直方向的布局。
image.png

image.png
里面每一个元素都垂直水平方向居中。
image.png
改成竖向布局
image.png

  1. .more-share-item{
  2.         width: 25%;
  3.         display: inline-flex;
  4.         justify-content: center;
  5.         align-items: center;
  6.         flex-direction: column;
  7.     }

图标加上大小
image.png

  1. .more-share-item>view:first-child{
  2.         width: 100upx;
  3.         height: 100upx;
  4.         border-radius: 100%;
  5.         border: 1upx solid;
  6.         font-size: 55upx;
  7.     }

image.png
这里加的布局好像没有起作用。
image.png
在css里面单独写。
image.png

  1. .more-share-body{
  2.         display: flex;
  3.         white-space: nowrap;
  4.         width: 100%;
  5.         height: 200upx;
  6.         border: 1upx solid;
  7.         display: flex;
  8.         align-items: center;
  9.         justify-content: center;
  10.     }

image.png

  1. display: flex!important;
  2.         align-items: center!important;
  3.         justify-content: center!important;

只保留这俩。竖直方向居中就可以了。
image.png

  1. display: flex!important;
  2. align-items: center!important;

还是不行。中间的图标没有垂直的居中。
image.png

行高和高度保持一致。这样可以垂直居中
image.png

垂直居中了
image.png
保留下边框
image.png

  1. border: 1upx solid #EEEEEE;

image.png

点击事件

image.png

  1. .more-share-hover{
  2.         background: #EEEEEE;
  3.     }

加hover-class
image.png

  1. <view class="more-share-item" hover-class="more-share-hover">

每一项都加上
image.png
取消这里也加一个
image.png

image.png

  1. <view class="more-share-item" hover-class="more-share-hover">
  2.                     <view class="icon iconfont icon-xinlangweibo u-f-ajc"></view>
  3.                     <view>新浪微博</view>
  4.                 </view>

朋友圈的图标自己找一下
image.png

image.png

image.png
每一个图标是单独的样式
image.png
image.png

  1. <scroll-view scroll-x class="more-share-body">
  2.                 <view class="more-share-item" hover-class="more-share-hover">
  3.                     <view class="icon iconfont icon-weixin u-f-ajc more-share-weixin"></view>
  4.                     <view>微信</view>
  5.                 </view>
  6.                 <view class="more-share-item" hover-class="more-share-hover">
  7.                     <view class="icon iconfont icon-weixin u-f-ajc more-share-pyq"></view>
  8.                     <view>朋友圈</view>
  9.                 </view>
  10.                 <view class="more-share-item" hover-class="more-share-hover">
  11.                     <view class="icon iconfont icon-xinlangweibo u-f-ajc more-share-wb"></view>
  12.                     <view>新浪微博</view>
  13.                 </view>
  14.                 <view class="more-share-item" hover-class="more-share-hover">
  15.                     <view class="icon iconfont icon-QQ u-f-ajc more-share-qq"></view>
  16.                     <view>QQ好友</view>
  17.                 </view>
  18.             </scroll-view>

吸取几个图标的颜色
image.png

image.png
4个不同颜色
image.png

  1. .more-share-weixin{
  2.         background: #2AD19B;
  3.     }
  4.     .more-share-pyq{
  5.         background: #514D4C;
  6.     }
  7.     .more-share-wb{
  8.         background: #EE5E5E;
  9.     }
  10.     .more-share-qq{
  11.         background: #4A73BA;
  12.     }

去掉黑色边框，让里面的图标是白色的
image.png
白色
image.png

  1. .more-share-item>view:first-child{
  2.         width: 100upx;
  3.         height: 100upx;
  4.         border-radius: 100%;
  5.         /* border: 1upx solid; */
  6.         font-size: 55upx;
  7.         color: #FFFFFF;
  8.     }

image.png

高度占100%
image.png

image.png
这样选中的样式就占 100%了。
image.png
加一个其他
image.png

需要往左边滑动一下
image.png

蒙版样式

image.png

  1. .more-share-model{
  2.         background: #333333;
  3.         position: fixed;
  4.         top: 0;
  5.         left: 0;
  6.         right: 0;
  7.         bottom: 0;
  8.         z-index: 100;
  9.     }

image.png

  1. .more-share{
  2.         position: fixed;
  3.         z-index: 100;
  4.         bottom: 0;
  5.         left: 0;
  6.         right: 0;
  7.         background: #FFFFFF;
  8.     }

image.png
变成透明的颜色
我们来复制这个样式到chrome浏览器
image.png
随便找个节点，复制到这里
image.png
然后点击这个颜色
image.png
拖到一半
image.png
换成RGBA的写法，然后直接复制
image.png

image.png

  1. .more-share-model{
  2.         background: rgba(51, 51, 51, 0.49);
  3.         position: fixed;
  4.         top: 0;
  5.         left: 0;
  6.         right: 0;
  7.         bottom: 0;
  8.         z-index: 100;
  9.     }

image.png

image.png

打开分享组件的事件

是否显示的属性
image.png

  1. shareshow:true,

默认是隐藏的。
image.png

  1. v-if="shareshow"

点击的时候取反操作
image.png

  1. togle(){
  2.                 this.shareshow=!this.shareshow;
  3.             },

image.png

  1. togle(){
  2.     this.shareshow=!this.shareshow;
  3. },

蒙版也调用toggle事件
image.png

  1. <view class="more-share-model" v-if="shareshow" @tap="togle"></view>

取消也调用toggle
image.png

  1. <view class="more-share-bottom u-f-ajc" hover-class="more-share-hover" @tap="togle">取消</view>

image.png

封装组件

image.png

image.png
最外层嵌套一个组件
image.png

  1. <view>
  2.         <view class="more-share-model" v-if="shareshow" @tap="togle"></view>
  3.         <view class="more-share" v-if="shareshow">
  4.             <view class="more-share-title u-f-ajc">分享到</view>
  5.             <scroll-view scroll-x class="more-share-body">
  6.                 <view class="more-share-item" hover-class="more-share-hover">
  7.                     <view class="icon iconfont icon-weixin u-f-ajc more-share-weixin"></view>
  8.                     <view>微信</view>
  9.                 </view>
  10.                 <view class="more-share-item" hover-class="more-share-hover">
  11.                     <view class="icon iconfont icon-weixin u-f-ajc more-share-pyq"></view>
  12.                     <view>朋友圈</view>
  13.                 </view>
  14.                 <view class="more-share-item" hover-class="more-share-hover">
  15.                     <view class="icon iconfont icon-xinlangweibo u-f-ajc more-share-wb"></view>
  16.                     <view>新浪微博</view>
  17.                 </view>
  18.                 <view class="more-share-item" hover-class="more-share-hover">
  19.                     <view class="icon iconfont icon-QQ u-f-ajc more-share-qq"></view>
  20.                     <view>QQ好友</view>
  21.                 </view>
  22.                 <view class="more-share-item" hover-class="more-share-hover">
  23.                     <view class="icon iconfont icon-QQ u-f-ajc more-share-qq"></view>
  24.                     <view>其他</view>
  25.                 </view>
  26.             </scroll-view>
  27.             <view class="more-share-bottom u-f-ajc" hover-class="more-share-hover" @tap="togle">取消</view>
  28.         </view>
  29.     </view>

最外层加动画
image.png

  1. <view class="animated fadeIn fast">

是否显示放在最外层的view上，不放在里面 两个元素上了。
image.png

  1. <view class="animated fadeIn fast" v-if="shareshow">

参数改成show
image.png

image.png

  1. export default{
  2.         props:{
  3.             show: Boolean
  4.         },
  5.         methods:{
  6.             togle() {
  7.                 this.$emit('togle');
  8.             }
  9.         }
  10.     }

引入组件

image.png

  1. import moreShare from '@/components/common/more-share.vue';

image.png

image.png

  1. <more-share :show="shareshow" @togle="togle()"></more-share>

image.png
css也要复制进来

image.png

image.png

image.png

image.png

本节代码

display:inline-flex布局

https://www.jianshu.com/p/4d596708f61b

https://blog.csdn.net/jiang12138/article/details/100178726

more-share.vue组件

  1. <template>
  2.     <view class="animated fadeIn fast" v-if="show">
  3.         <view class="more-share-model" @tap="togle"></view>
  4.         <view class="more-share">
  5.             <view class="more-share-title u-f-ajc">分享到</view>
  6.             <scroll-view scroll-x class="more-share-body">
  7.                 <view class="more-share-item" hover-class="more-share-hover">
  8.                     <view class="icon iconfont icon-weixin u-f-ajc more-share-weixin"></view>
  9.                     <view>微信</view>
  10.                 </view>
  11.                 <view class="more-share-item" hover-class="more-share-hover">
  12.                     <view class="icon iconfont icon-weixin u-f-ajc more-share-pyq"></view>
  13.                     <view>朋友圈</view>
  14.                 </view>
  15.                 <view class="more-share-item" hover-class="more-share-hover">
  16.                     <view class="icon iconfont icon-xinlangweibo u-f-ajc more-share-wb"></view>
  17.                     <view>新浪微博</view>
  18.                 </view>
  19.                 <view class="more-share-item" hover-class="more-share-hover">
  20.                     <view class="icon iconfont icon-QQ u-f-ajc more-share-qq"></view>
  21.                     <view>QQ好友</view>
  22.                 </view>
  23.                 <view class="more-share-item" hover-class="more-share-hover">
  24.                     <view class="icon iconfont icon-QQ u-f-ajc more-share-qq"></view>
  25.                     <view>其他</view>
  26.                 </view>
  27.             </scroll-view>
  28.             <view class="more-share-bottom u-f-ajc" hover-class="more-share-hover" @tap="togle">取消</view>
  29.         </view>
  30.     </view>
  31. </template>
  33. <script>
  34.     export default{
  35.         props:{
  36.             show: Boolean
  37.         },
  38.         methods:{
  39.             togle() {
  40.                 this.$emit('togle');
  41.             }
  42.         }
  43.     }
  44. </script>
  46. <style scoped>
  47.     .more-share-model{
  48.         background: rgba(51, 51, 51, 0.49);
  49.         position: fixed;
  50.         top: 0;
  51.         left: 0;
  52.         right: 0;
  53.         bottom: 0;
  54.         z-index: 100;
  55.     }
  56.     .more-share{
  57.         position: fixed;
  58.         z-index: 100;
  59.         bottom: 0;
  60.         left: 0;
  61.         right: 0;
  62.         background: #FFFFFF;
  63.     }
  64.     .more-share-title,.more-share-bottom{
  65.         font-size: 32upx;
  66.         padding: 25upx;
  67.     }
  68.     .more-share-body{
  69.         white-space: nowrap;
  70.         width: 100%;
  71.         height: 200upx;
  72.         border: 1upx solid #EEEEEE;
  73.         display: flex!important;
  74.         /* align-items: center!important; */
  75.         line-height: 200upx!important;
  76.     }
  77.     .more-share-item{
  78.         width: 25%;
  79.         display: inline-flex;
  80.         justify-content: center;
  81.         align-items: center;
  82.         flex-direction: column;
  83.         height: 100%;
  84.     }
  85.     .more-share-item>view:first-child{
  86.         width: 100upx;
  87.         height: 100upx;
  88.         border-radius: 100%;
  89.         /* border: 1upx solid; */
  90.         font-size: 55upx;
  91.         color: #FFFFFF;
  92.     }
  93.     .more-share-item>view:last-child{
  94.         color: #7A7A7A;
  95.     }
  96.     .more-share-hover{
  97.         background: #EEEEEE;
  98.     }
  99.     .more-share-weixin{
  100.         background: #2AD19B;
  101.     }
  102.     .more-share-pyq{
  103.         background: #514D4C;
  104.     }
  105.     .more-share-wb{
  106.         background: #EE5E5E;
  107.     }
  108.     .more-share-qq{
  109.         background: #4A73BA;
  110.     }
  111. </style>

detail.vue页面

  1. <template>
  2.     <view>
  3.         <detail-info :item="detail"></detail-info>
  4.         <view class="u-comment-title">最新评论 {{comment.count}}</view>
  5.         <!-- 评论区 start -->
  6.         <view class="uni-comment u-comment">
  7.             <block v-for="(item,index) in comment.list" :key="index">
  8.                 <comment-list :item="item" :index="index"></comment-list>
  9.             </block>
  10.         </view>
  11.         <view style="height: 120upx;"></view>
  12.         <user-chat-bottom @submit="submit"></user-chat-bottom>
  14.         <!-- 分享 -->
  15.         <more-share :show="shareshow" @togle="togle()"></more-share>
  17.     </view>
  18. </template>
  20. <script>
  21.     import detailInfo from '@/components/detail/detail-info.vue';
  22.     import time from '../../common/time.js';
  23.     import commentList from '@/components/detail/comment-list.vue';
  24.     import userChatBottom from '@/components/user-chat/user-chat-bottom.vue';
  25.     import moreShare from '@/components/common/more-share.vue';
  26.     export default {
  27.         components: {
  28.             detailInfo,
  29.             commentList,
  30.             userChatBottom,
  31.             moreShare
  32.         },
  33.         data() {
  34.             return {
  35.                 shareshow:false,
  36.                 detail: {
  37.                     userpic: "../../static/demo/userpic/12.jpg",
  38.                     username: "哈哈",
  39.                     sex: 0, //0 男 1 女
  40.                     age: 25,
  41.                     isguanzhu: false,
  42.                     title: "我是标题",
  43.                     titlepic: "../../static/demo/datapic/13.jpg",
  44.                     morepic: ["../../static/demo/datapic/13.jpg", "../../static/demo/datapic/12.jpg"],
  45.                     video: false,
  46.                     share: false,
  47.                     path: "深圳 龙岗",
  48.                     sharenum: 20,
  49.                     commentnum: 30,
  50.                     goodnum: 20
  51.                 },
  52.                 comment: {
  53.                     count: 20,
  54.                     list: []
  55.                 }
  56.             }
  57.         },
  58.         onLoad(e) {
  59.             // console.log(e.detailDate);
  60.             this.initdata(JSON.parse(e.detailDate));
  61.             this.getcomment();
  62.         },
  63.         // 监听导航右边按钮
  64.         onNavigationBarButtonTap(e) {
  65.             // console.log(e);
  66.             if (e.index == 0) {
  67.                 console.log("分享");
  68.                 this.togle();
  69.             }
  70.         },
  71.         methods: {
  72.             togle(){
  73.                 this.shareshow=!this.shareshow;
  74.             },
  75.             // 获取评论
  76.             getcomment() {
  77.                 let arr = [
  78.                     // 一级评论
  79.                     {
  80.                         id: 1,
  81.                         fid: 0,
  82.                         userpic: "../../static/demo/userpic/12.jpg",
  83.                         username: "小猫咪",
  84.                         time: "1555400035",
  85.                         data: "支持国产，支持DCloud!",
  86.                     },
  87.                     // 子级评论
  88.                     {
  89.                         id: 2,
  90.                         fid: 1,
  91.                         userpic: "../../static/demo/userpic/12.jpg",
  92.                         username: "小猫咪",
  93.                         time: "1555400035",
  94.                         data: "支持国产，支持DCloud!",
  95.                     },
  96.                     {
  97.                         id: 3,
  98.                         fid: 1,
  99.                         userpic: "../../static/demo/userpic/12.jpg",
  100.                         username: "小猫咪",
  101.                         time: "1555400035",
  102.                         data: "支持国产，支持DCloud!",
  103.                     },
  104.                     {
  105.                         id: 4,
  106.                         fid: 0,
  107.                         userpic: "../../static/demo/userpic/12.jpg",
  108.                         username: "小猫咪",
  109.                         time: "1555400035",
  110.                         data: "支持国产，支持DCloud!",
  111.                     },
  112.                 ];
  113.                 for (let i = 0; i < arr.length; i++) {
  114.                     arr[i].time = time.gettime.gettime(arr[i].time);
  115.                 }
  116.                 this.comment.list = arr;
  117.             },
  118.             // 初始化数据
  119.             initdata(obj) {
  120.                 console.log('拿到标题：', obj);
  121.                 uni.setNavigationBarTitle({
  122.                     title: obj.title
  123.                 })
  124.             },
  125.             submit(data) {
  126.                 console.log(data);
  127.                 let obj = {
  128.                     id: 1,
  129.                     fid: 0,
  130.                     userpic: "../../static/demo/userpic/12.jpg",
  131.                     username: "小猫咪",
  132.                     time: time.gettime.gettime(new Date().getTime()),
  133.                     data: data,
  134.                 };
  135.                 this.comment.list.push(obj);
  136.             }
  137.         }
  138.     }
  139. </script>
  141. <style>
  142.     .u-comment-title {
  143.         padding: 20upx;
  144.         font-size: 30upx;
  145.         font-weight: bold;
  146.     }
  147.     .u-comment {
  148.         padding: 0 20upx;
  149.     }
  152. </style>

结束