小程序树形组件选中栏变色

如果你想要树形组件中选中的栏目变色，可以通过以下步骤实现：

1. 在树形组件中，给选中的栏目添加一个 class 或者样式。

2. 通过监听树形组件中的选中事件，在选中事件中获取当前选中的栏目的节点信息。

3. 在选中事件中，找到所有已选中的栏目，去除它们的选中样式。

4. 给当前选中的栏目添加选中样式。

以下是示例代码：

// 在树形组件中添加一个选中样式
.tree-node-selected {
  background-color: #e6f7ff;
}

// 监听树形组件中的选中事件
<tree @node-click="handleNodeClick"></tree>

// 在选中事件中，获取当前选中的栏目的节点信息
handleNodeClick(node) {
  // 找到所有已选中的栏目，去除它们的选中样式
  const selectedNodes = this.$refs.tree.getSelectedNodes();
  selectedNodes.forEach(node => {
    node.isSelected = false;
  });

  // 给当前选中的栏目添加选中样式
  node.isSelected = true;
}

相关问题

小程序多个按钮选中变色点击取消

您可以通过为每个按钮设置一个变量来实现这一功能。当用户点击按钮时，该按钮的变量将被设置为“选中”，并且该按钮的背景颜色将被更改。当用户再次点击该按钮时，该按钮的变量将被设置为“未选中”，并且该按钮的背景颜色将被还原为原始颜色。您可以使用类似下面的代码来实现这一功能：

data: {
  buttons: [
    {
      name: '按钮1',
      selected: false
    },
    {
      name: '按钮2',
      selected: false
    },
    {
      name: '按钮3',
      selected: false
    }
  ]
},

methods: {
  toggleButton: function(index) {
    this.buttons[index].selected = !this.buttons[index].selected;
  }
}

然后，在您的页面中，您可以使用类似下面的代码来渲染按钮：

<view wx:for="{{buttons}}" wx:key="{{index}}">
  <button class="{{item.selected ? 'selected' : ''}}" bindtap="toggleButton({{index}})">{{item.name}}</button>
</view>

在样式表中，您可以为“selected”类设置所需的背景颜色。

微信小程序选中文字变色，没被选中不变色

要实现微信小程序中选中文字变色的效果，可以通过使用 `rich-text` 组件来实现。具体步骤如下：

1. 将需要展示的文本放在 `rich-text` 标签中，并设置一个唯一的 `id` 属性，例如：

<rich-text id="myText" nodes="{{richTextNodes}}"></rich-text>

2. 在 `wxml` 文件中添加以下样式：

::selection {
  background-color: #FFC0CB; /* 设置选中文字的背景色 */
  color: #000; /* 设置选中文字的文本颜色 */
}

#myText {
  user-select: none; /* 禁止用户选择文本 */
}

3. 在 `js` 文件中，定义 `richTextNodes` 数据，用于渲染 `rich-text` 组件的内容。当用户选中文本时，`bindtap` 事件会触发，可以通过 `wx.createSelectorQuery()` 获取选中的文本节点，并设置 `style` 属性，以达到选中文字变色的效果，例如：

Page({
  data: {
    richTextNodes: [
      {
        type: 'text',
        text: '这是一段需要展示的文本'
      }
    ]
  },
  // 绑定 tap 事件，获取选中的文本节点
  bindtap: function() {
    wx.createSelectorQuery().select('#myText').boundingClientRect(function(rect) {
      // 获取选中文本的开始和结束位置
      let start = rect.startOffset;
      let end = rect.endOffset;
      // 获取选中文本的父节点
      let parent = rect.parentRect;
      // 获取选中文本节点的数组
      let nodes = rect.nodes;
      // 遍历选中文本节点数组，设置选中文本的样式
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.nodeType === 3) { // 文本节点
          let text = node.textContent;
          let textLength = text.length;
          let textStart = start - node.start;
          let textEnd = end - node.start;
          if (textStart < textLength && textEnd > 0) {
            if (textStart < 0) {
              textStart = 0;
            }
            if (textEnd > textLength) {
              textEnd = textLength;
            }
            let subText = text.substring(textStart, textEnd);
            let newText = text.replace(subText, `<span style="background-color:#FFC0CB">${subText}</span>`);
            node.textContent = '';
            node.insertAdjacentHTML('beforeend', newText);
          }
        }
      }
    }).exec();
  }
})

这样，当用户选中文本时，被选中的文本会变色，未被选中的文本保持原来的颜色。