小程序删除某项导航时 点击导航出现问题

Question

这是列表页的结构。点击右上＋号后出现下图。
变更频道界面

现在的问题是，删除了比如说推荐之后，列表页的导航就会出现问题，设置的是当前数组第一项为激活的频道（删除推荐后的第一项应该是热点），结果直接蹦到第二项了（也就是本地），而且点击后都会后移一位，比如点击本地，会蹦到社会。实在是想不出原因。

js部分代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShowPinDao: false,
    content_height:100,
    channels:[
      { name: '推荐', id: 'tuijian', data: [] },
      { name: '热点', id: 'redian', data: [] },
      { name: '本地', id: 'bendi', data: [] },
      { name: '社会', id: 'shehui', data: [] },
      { name: '娱乐', id: 'yule', data: [] },
      { name: '军事', id: 'junshi', data: [] },
      { name: '科技', id: 'keji', data: [] },
      { name: '汽车', id: 'qiche', data: [] }
    ],
    activeChannel:'tuijian',
    otherChannels:[
      { name: '亲子', id: 'qinzi', data: [] },
      { name: '女人', id: 'nvren', data: [] },
      { name: '星座', id: 'xingzuo', data: [] },
      { name: '情感', id: 'qinggan', data: [] },
      { name: '修仙', id: 'xiuxian', data: [] },
      { name: '都市', id: 'dushi', data: [] },
      { name: '美食', id: 'meishi', data: [] },
      { name: '热剧', id: 'reju', data: [] },
      { name: '小说', id: 'xiaoshuo', data: [] },
    ]
  },
     //点击切换频道
  clickChangeChannel: function (e) {
    //获取当前频道id
    var id = e.currentTarget.dataset.id;
    this.setData({ 'activeChannel': id })
    //判断当前频道有无数据
    var index = e.currentTarget.dataset.index;
    //接收this指向
    var that = this;
    var key = 'channels[' + index + '].data';
    if(this.data.channels[index].data.length == 0){
      //无数据则去请求接口
      wx.request({
        url: 'https://c.m.163.com/nc/article/headline/data/10-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985878&sign=oDwq9mBweKUtUuiS%2FPvB015PyTDKHSxuyuVq2076XQB48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore', 
        success(res) {
          that.setData({ [key]: res.data.data })
        }
      })   
    }
    //遮罩层点击移除频道
  clickRemoveChannel:function(e){
    var index = e.currentTarget.dataset.index;
    //把我的频道中移除的放入其他频道
    var removeItem = this.data.channels[index];
    this.data.otherChannels.push(removeItem);
    this.setData({ otherChannels: this.data.otherChannels});
    //把我的频道中的删除
    this.data.channels.splice(index, 1); 
    this.setData({ channels: this.data.channels});
        //设置改变后的数组第一项为激活频道
    var id = this.data.channels[0].id;
    console.log(id);
    this.setData({activeChannel:id});
  }, 

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

在您的代码中，当您尝试将某个频道从页面上的列表中移除并将其添加到其他频道时，可能会遇到一些问题。以下是一些建议来解决这些问题：

首先，确保正确处理频道数据和ID

确保频道ID是唯一的，并且在调用setData方法时传递正确的频道ID。

var channelIndex = channels.indexOf(currentChannel);
if(channelIndex > -1) {
  // 如果频道已存在于数组中，则将其从数组中移除
  channels.splice(channelIndex, 1);
} else {
  // 如果频道不存在于数组中，则将其添加到数组末尾
  channels.push(currentChannel);
}

检查是否有重复的数据

在删除频道后，如果其他频道中有相同的频道ID，那么在移除频道后，新的频道可能会覆盖原有的数据。为了防止这种情况，请检查频道ID是否唯一。

// 在删除频道前，确认频道ID唯一
if (!this.data.channels.some(item => item.id === currentChannel)) {
  this.clickRemoveChannel(currentChannel);
}

使用事件监听器监听频道选择变化

使用change事件监听器来响应频道选择的变化，这样可以在频道选择发生变化时更新相应的操作。

this.on('change', function(e) {
  switch (e.detail.channel) {
    case 'tuijian':
      // 在这里处理推荐频道的选择
      break;
    case 'hot':
      // 在这里处理热点频道的选择
      break;
    // 添加更多的case来处理其他频道的选择
    default:
      // 如果频道未指定，则默认处理其他频道的选择
  }
});

优化移除频道的操作

对于移除频道的操作，建议将它放在一个独立的方法或函数中，以便更好地控制和管理这些操作。

// 移除频道的方法
removeChannel: function() {
  // ... 根据实际情况进行移除频道的逻辑
},

通过遵循上述建议，您可以更有效地管理和处理频道之间的关系，从而避免在列表页导航出现问题的情况发生。