uniapp视频号底栏前端实现

最新推荐文章于 2026-01-05 15:58:43 发布

原创最新推荐文章于 2026-01-05 15:58:43 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

实现结果：实现动态的内容下面收藏点赞等互动的资料

实现思路：最下面左右两个div的做法其他类容从上往下排列

实现代码

<template>
    <view>
        <view class="menb">
            <img src="/static/images/banner1.jpg" />
        </view>
        <view class="mena">
            <view class="menb">
                <view>
                    <img src="/static/更多.png" alt="" />
                    <p>收藏</p>
                </view>
                <view>
                    <img src="/static/喇叭.png" alt="" />
                    <p>转发</p>
                </view>
            </view>
            <!-- 右边的内容 -->
            <view class="menb">
                <view>
                    <img src="/static/更多.png" alt="" />
                    <p>5.0万</p>
                </view>
                <view>
                    <img src="/static/喇叭.png" alt="" />
                    <p>1406</p>
                </view>
            </view>
        </view>
    </view>
</template>

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

<style scoped>
/* page{
     background: #f0f0f0;
 } */
  img{
      width: 100%;
  }
  .mena img{
      width: 60rpx;
      height: 60rpx;
  }
  .mena p{
      font-size: 28rpx;
  }
  .mena{
     /* background: yellowgreen; */
      height: 120rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .menb{
      display: flex;
  }
  .menb view{
      padding: 0 20rpx;
      text-align: center;
  }
</style>