前端uniapp写微信朋友圈九宫格

原创于 2025-03-17 15:20:20 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #uni-app #微信

实现结果：实现朋友圈九宫格功能

实现思路：按照flex布局实现排列display: flex;
flex-wrap: wrap; 具体思路就是设置图片的宽度。然后使用flex的wrap样式换行实现九宫格图片的排列方式。

实现代码

<template>
    <view>
        <view class="mean">
            <div> <img src="static/images/classify1.jpg" alt="" /></div>
            <div> <img src="static/images/classify1.jpg" alt="" /></div>
            <div> <img src="static/images/classify1.jpg" alt="" /></div>
            <div> <img src="static/images/classify1.jpg" alt="" /></div>
            <div> <img src="static/images/classify1.jpg" alt="" /></div>
            <div> <img src="static/images/classify1.jpg" alt="" /></div>
            <div> <img src="static/images/classify1.jpg" alt="" /></div>
            <div> <img src="static/images/classify1.jpg" alt="" /></div>
            <div> <img src="static/images/classify1.jpg" alt="" /></div>
            
        </view>
    </view>
</template>

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

<style scoped>
/* page{
     background: #f0f0f0;
 } */
  img{
      width: 100%;
      height: 100%;
  }
  .mean div{
      width: calc(33.3% - 10rpx);
      height: 160rpx;
      padding: 5rpx;
    /*  box-sizing: border-box; */
  }
  .mean {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
  }
</style>

具体的图片宽度自己可以去设置