微信小程式–粉絲列表 樣式實現

• 2020 年 3 月 18 日
• 筆記

微信小程式粉絲列表效果實現

1.效果圖

2.程式碼實現

index.js 部分

data: {      friends: []   },

index.wxml

<view class="box transition" wx:if="{{friends.length}}">    <view class="title">我的粉絲</view>    <view class="user-panel" wx:for="{{friends}}" wx:key="index">      <image class="head" src="{{item.avatarUrl }}"></image>      <view class="center">        <view class="name">          <text class="name-text">{{item.name}}</text>          <i class="iconfont {{item.gender ? 'nan' : 'nv'}}"></i>        </view>        <view class="code">發帖 {{item.post}} 粉絲 {{item.fans}}</view>      </view>      <view class="follow {{item.isFollow ? 'follows' : ''}}" data-id="{{item._id}}" bindtap="handleFollow">{{item.isFollow ? "已關注" : "關注"}}</view>    </view>  </view>

index.json

{    "usingComponents": {},    "navigationBarTitleText": "粉絲列表",    "backgroundColor": "#f6f6f6"  }

index.wxss

page {    background-color: #f6f6f6;  }    .title {    background-color: #fff;    color: #000;    font-weight: bold;    font-size: 28rpx;    padding: 20rpx 20rpx 20rpx 40rpx;    margin-top: 20rpx;    border-bottom: 2rpx solid #f6f6f6;    position: relative;  }    .title::after {    content: "";    display: block;    width: 6rpx;    height: 20rpx;    background-color: #f40000;    position: absolute;    left: 20rpx;    top: 50%;    margin-top: -10rpx;    z-index: 1;  }    .box {    background-color: #fff;  }    .user-panel {    margin: 0 20rpx;    padding: 20rpx 0;    display: flex;    align-items: center;    border-bottom: 2rpx solid #f6f6f6;  }    .head {    flex-shrink: 0;    width: 80rpx;    height: 80rpx;    margin-right: 20rpx;  }    .center {    flex-grow: 1;    height: 80rpx;  }    .name {    display: flex;    align-items: center;  }    .name-text {    font-size: 28rpx;    font-weight: bold;    color: #333;    margin-right: 20rpx;  }    .nan {    font-size: 22rpx;    color: #1296db;    margin-top: 6rpx;  }    .nv {    font-size: 24rpx;    color: #ff3ec9;    margin-top: 6rpx;  }    .code {    font-size: 24rpx;    color: #999;    margin-top: 6rpx;  }    .follow {    flex-shrink: 0;    width: 90rpx;    height: 40rpx;    font-size: 24rpx;    color: #fff;    text-align: center;    line-height: 40rpx;    border-radius: 6rpx;    background-color: #f40000;  }    .follows {    background-color: #eee;  }