uni app实现关注列表功能

Question

有一个功能，有点像抖音一样，查询关注列表，点击按钮可以取消关注，再点就是关注成功，要显示已关注或者互相关注的状态，不知道该怎么显示这两种状态，已关注和相互关注

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/946996
• 这篇博客也不错, 你可以看下很多人都不知道的监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
• 除此之外, 这篇博客: 【uni-app】点击左上角返回按钮，弹出弹窗或者是携带参数返回上一页中的 1、弹出弹窗 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  当我返回上一页的时候需要做一个判断是否需要保存

  

  onBackPress 只支持APP和H5 但不支持小程序 ，可以用onUnload生命周期解决，页面销毁的时候执行方法。

  注意：onBackPress和methods、onLoad同级

  data() {
  	return {
  		flag: true //是否弹出返回提示框 
  	}
  },
  onBackPress() {
  			if (this.flag) {
  				uni.showModal({
  					title: "确定退出编辑？",
  					content: "退出后内容不做保存",
  					success: (res) => {
  						if (res.confirm) {
  							// console.log("确定返回");
  							this.flag = false
  							uni.navigateBack({
  								delta: 1, //返回层数，2则上上页
  							})
  							return true
  						} else {
  							this.flag = true
  							// console.log("取消");
  							return true
  						}
  					}
  				})
  				return true
  			} else {
  				return false
  			}
  },

  另一种写法

  注意：不能写options.from === 'backbutton' ，因为 uni.navigateBack() 同样会触发 onBackPress 函数。因此在 onBackPress 中直接调用 uni.navigateBack() 并始终返回 true 会引发死循环。 从而会导致重写 onBackPress 方法不生效的罪魁祸首，然而也没有任何错误提示。

  onBackPress(options) {
      if (options.from === 'navigateBack') {
          return false
      }
      uni.navigateBack({
          delta: 1
      })
      return true
  }

• 您还可以看一下 陈槐老师的app功能测试和性能测试课程课程中的 如何开启定位以及推送消息测试小节, 巩固相关知识点
  
• 以下回答来自chatgpt:

  针对问题，实现关注列表功能需要包括以下几个方面：

  1. 数据结构的设计：需要设计关注用户列表和粉丝列表的数据结构，并且要考虑到已关注和互相关注的状态。

  2. 页面展示：需要在页面中展示已关注和互相关注的状态，并且要实现点击按钮取消关注后，再次点击按钮将会关注成功的功能。

  3. 数据存储和操作：需要在程序中将关注用户列表和粉丝列表的数据存储在本地，同时还需要实现对关注状态的改变。

  针对以上方面，下面是具体的实现步骤：

  1. 数据结构的设计

  需要设计两个数据结构，即关注用户列表和粉丝列表，每个列表中的元素应该至少包括用户的 id 和关注状态（已关注或互相关注）。

  // 关注用户列表
  let followList = [
    { id: 1, state: 'follow' },
    { id: 2, state: 'mutual' },
    { id: 3, state: 'follow' }
  ];
  
  // 粉丝列表
  let fansList = [
    { id: 2, state: 'mutual' },
    { id: 3, state: 'fans' },
    { id: 4, state: 'fans' }
  ];
  

  2. 页面展示

  页面中可以使用 uni-list 组件展示关注用户列表和粉丝列表，其中每个列表项包含一个头像和用户名，同时还要根据关注状态显示不同的按钮。

  <template>
    <view>
      <view class="follow-list">
        <uni-list>
          <uni-list-item
            v-for="user in followList"
            :key="user.id"
          >
            <view slot="thumb" class="avatar"></view>
            <view class="user-info">
              <view class="user-name">{{ user.name }}</view>
              <view class="user-state">
                <view
                  v-if="user.state === 'follow'"
                  class="state-button follow"
                  @click="toggleFollow(user)">
                  已关注
                </view>
                <view
                  v-else-if="user.state === 'mutual'"
                  class="state-button mutual"
                  @click="toggleFollow(user)">
                  互相关注
                </view>
                <view
                  v-else
                  class="state-button add"
                  @click="toggleFollow(user)">
                  + 关注
                </view>
              </view>
            </view>
          </uni-list-item>
        </uni-list>
      </view>
      <view class="fans-list">
        <uni-list>
          <uni-list-item
            v-for="user in fansList"
            :key="user.id"
          >
            <view slot="thumb" class="avatar"></view>
            <view class="user-info">
              <view class="user-name">{{ user.name }}</view>
              <view class="user-state">
                <view
                  v-if="user.state === 'mutual'"
                  class="state-button mutual"
                  @click="toggleFollow(user)">
                  互相关注
                </view>
                <view
                  v-else-if="user.state === 'fans'"
                  class="state-button add"
                  @click="toggleFollow(user)">
                  + 关注
                </view>
              </view>
            </view>
          </uni-list-item>
        </uni-list>
      </view>
    </view>
  </template>
  

  toggleFollow 方法用于切换关注状态。如果原来是已关注的，就要取消关注；如果原来是未关注的，就要关注。

  methods: {
    toggleFollow(user) {
      const userId = user.id;
      const followState = user.state;
      if (followState === 'follow') {
        // 取消关注
        this.followList = this.followList.filter(item => item.id !== userId);
        this.fansList = this.fansList.map(item => {
          if (item.id === userId) {
            item.state = 'fans';
          }
          return item;
        });
      } else {
        // 关注
        this.followList.push({ id: userId, state: 'follow' });
        this.fansList = this.fansList.map(item => {
          if (item.id === userId) {
            item.state = item.state === 'mutual' ? 'mutual' : 'fans';
          }
          return item;
        });
      }
    }
  }
  

  3. 数据存储和操作

  为了方便数据的操作，可以使用 Vuex 保存关注用户列表和粉丝列表的数据，同时还要在用户点击按钮时更新数据。

  ``` const store = new Vuex.Store({ state: { followList: [], fansList: [] }, mutations: { setFollowList(state, followList) { state.followList = followList; }, setFansList(state, fansList) { state.fansList = fansList;

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^