uniapp 前端微信个人页面我的功能css实现

原创已于 2025-03-17 11:41:23 修改 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

于 2025-03-17 11:26:08 首次发布

实现结果。实现这个我的页面的列表功能

实现思路：左右两个小图标。中间是文字。下面是一条下划线 border 边框。

实现代码：

<template>
    <view class="one">
        <view class="mena">
           <img src="static/更多.png" alt="" />
           <p>收藏</p>
           <img src="static/喇叭.png" alt="" />
        </view>
        <view class="mena">
           <img src="static/更多.png" alt="" />
           <p>收藏</p>
           <img src="static/喇叭.png" alt="" />
        </view>
    </view>
</template>

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

<style scoped>
 page {
     background: #f0f0f0;
 }
 img{
     width: 20rpx;
     height: 20rpx
 }
 p{
     font-size: 36rpx;
     flex: 1;
     padding-left: 30rpx;
     
 }
 .mena{
     display: flex;
     align-items: center;
     padding: 0 15rpx;
     /* justify-content: space-between; */
     background: white;
     height: 100rpx;
     border-bottom: 2rpx solid #f0f0f0;
 }
</style>

该功能实现了页面上，我的页面功能css的功能