Open ice909 opened 1 month ago
@nutui/nutui-taro
4.1.6
h5, weapp
https://nutui.jd.com/playground/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbiAgaW1wb3J0IHtyZWZ9IGZyb20gXCJ2dWVcIlxuY29uc3QgdGFicyA9IHJlZigxKVxuY29uc3QgdGFiTGlzdCA9IHJlZihbXG4gIHsgdGl0bGU6ICfkuLvpopgnLCBwYW5lS2V5OiAxLCBtc2dDYXRlZ29yeTogXCJ0aHJlYWRfbXNnX2NvdW50XCIgfSxcbiAgeyB0aXRsZTogJ+W4luWtkCcsIHBhbmVLZXk6IDIsIG1zZ0NhdGVnb3J5OiBcInBvc3RfbXNnX2NvdW50XCIgfSxcbiAgeyB0aXRsZTogJ+ezu+e7n+a2iOaBrycsIHBhbmVLZXk6IDMsIG1zZ0NhdGVnb3J5OiBcInN5c19tc2dfY291bnRcIiB9LFxuICB7IHRpdGxlOiAn56eB5L+hJywgcGFuZUtleTogNSwgbXNnQ2F0ZWdvcnk6IFwibGV0dGVyX21zZ19jb3VudFwiIH0sXG4gIHsgdGl0bGU6ICdA5oiR55qEJywgcGFuZUtleTogNiwgbXNnQ2F0ZWdvcnk6IFwiYXRfbXNnX2NvdW50XCIgfVxuXSlcbmNvbnN0IHRhYnNDaGFuZ2UgPSAob3B0KSA9PiB7XG4gIGNvbnNvbGUubG9nKFwib3B0OiBcIiwgb3B0KVxuICBjb25zb2xlLmxvZyhcInRhYnM6IFwiLCB0YWJzLnZhbHVlKVxuICB0YWJzLnZhbHVlID0gb3B0LnBhbmVLZXlcbn1cbmNvbnN0IG1zZ0NvdW50ID0gcmVmKHtcbiAgYXRfbXNnX2NvdW50OiAwLFxuICBsZXR0ZXJfbXNnX2NvdW50OiAwLFxuICBwb3N0X21zZ19jb3VudDogMCxcbiAgc3lzX21zZ19jb3VudDogMCxcbiAgdGhyZWFkX21zZ19jb3VudDogMFxufSlcbjwvc2NyaXB0PlxuPHRlbXBsYXRlPlxuICA8bnV0LXRhYnMgdi1tb2RlbD1cInRhYnNcIiBzd2lwZWFibGUgYXV0by1oZWlnaHQgQGNoYW5nZT1cInRhYnNDaGFuZ2VcIj5cbiAgICAgIDx0ZW1wbGF0ZSAjdGl0bGVzPlxuICAgICAgICA8dmlldyBjbGFzcz1cInRhYi1saXN0XCI+XG4gICAgICAgICAgPG51dC1iYWRnZSB2LWZvcj1cIml0ZW0gaW4gdGFiTGlzdFwiIDprZXk9XCJpdGVtLnBhbmVLZXlcIiBjbGFzcz1cInRhYi1pdGVtXCIgQGNsaWNrPVwidGFicyA9IGl0ZW0ucGFuZUtleVwiXG4gICAgICAgICAgICA6Y2xhc3M9XCJ7IGFjdGl2ZTogdGFicyA9PT0gaXRlbS5wYW5lS2V5IH1cIiA6dmFsdWU9XCJtc2dDb3VudFtpdGVtLm1zZ0NhdGVnb3J5XVwiIDptYXg9XCI5XCJcbiAgICAgICAgICAgIDpoaWRkZW49XCJtc2dDb3VudFtpdGVtLm1zZ0NhdGVnb3J5XSA9PT0gMFwiIHRvcD1cIjEwXCIgcmlnaHQ9XCItNVwiPiB7eyBpdGVtLnRpdGxlXG4gICAgICAgICAgICB9fTwvbnV0LWJhZGdlPlxuICAgICAgICA8L3ZpZXc+XG4gICAgICA8L3RlbXBsYXRlPlxuICAgIDxudXQtdGFiLXBhbmUgOnBhbmUta2V5PVwiMVwiPlxuICAgICAgICA8dmlldz7kuLvpopg8L3ZpZXc+XG4gICAgICA8L251dC10YWItcGFuZT5cbiAgICA8bnV0LXRhYi1wYW5lIDpwYW5lLWtleT1cIjJcIj5cbiAgICAgICAgPHZpZXc+5biW5a2QPC92aWV3PlxuICAgICAgPC9udXQtdGFiLXBhbmU+XG4gICAgPG51dC10YWItcGFuZSA6cGFuZS1rZXk9XCIzXCI+XG5cdFx0XHQgPHZpZXc+57O757uf5raI5oGvPC92aWV3PlxuICAgICAgPC9udXQtdGFiLXBhbmU+XG4gICAgPG51dC10YWItcGFuZSA6cGFuZS1rZXk9XCI1XCI+XG4gICAgICAgIDx2aWV3PuengeS/oTwvdmlldz5cbiAgICAgIDwvbnV0LXRhYi1wYW5lPlxuICAgIDxudXQtdGFiLXBhbmUgOnBhbmUta2V5PVwiNlwiPlxuICAgICAgICA8dmlldz5A5oiR55qEPC92aWV3PlxuICAgICAgPC9udXQtdGFiLXBhbmU+XG4gIDwvbnV0LXRhYnM+XG48L3RlbXBsYXRlPlxuXG48c3R5bGUgID5cbiAgLnRhYi1saXN0IHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIHBhZGRpbmc6IDEwcHggNXB4O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG4gICAgYm94LXNoYWRvdzogMCAwIDEwcHggcmdiYSgwLCAwLCAwLCAwLjEpO1xuXG4gICAgXG4gIH1cbiAgLnRhYi1pdGVtIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgcGFkZGluZzogMTBweCAxMHB4IDIwcHggMTBweDtcbiAgICAgIGNvbG9yOiBibGFjaztcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICB9XG5cbiAgICAudGFiLWl0ZW0uYWN0aXZlIHtcbiAgICAgIGNvbG9yOiByZWQ7XG4gICAgICBib3JkZXItYm90dG9tOiAycHggc29saWQgcmVkO1xuICAgIH1cblxuPC9zdHlsZT4ifQ==
使用滑动切换tab选项卡,自定义导航区域的 active 类名会丢失,点击切换则不会
滑动切换,active 样式也可以跟随切换
一滑动,上面的active 样式就没了
No response
"vue": "^3.3.4"
@eiinu 补充一下,发现将:class="{ active: tabs === item.paneKey }" 改为 :class="{ active: tabs == item.paneKey }" 可以解决,类型转换好像有问题
:class="{ active: tabs === item.paneKey }"
:class="{ active: tabs == item.paneKey }"
NutUI 包名
@nutui/nutui-taro
NutUI 版本号
4.1.6
平台
h5, weapp
重现链接
https://nutui.jd.com/playground/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbiAgaW1wb3J0IHtyZWZ9IGZyb20gXCJ2dWVcIlxuY29uc3QgdGFicyA9IHJlZigxKVxuY29uc3QgdGFiTGlzdCA9IHJlZihbXG4gIHsgdGl0bGU6ICfkuLvpopgnLCBwYW5lS2V5OiAxLCBtc2dDYXRlZ29yeTogXCJ0aHJlYWRfbXNnX2NvdW50XCIgfSxcbiAgeyB0aXRsZTogJ+W4luWtkCcsIHBhbmVLZXk6IDIsIG1zZ0NhdGVnb3J5OiBcInBvc3RfbXNnX2NvdW50XCIgfSxcbiAgeyB0aXRsZTogJ+ezu+e7n+a2iOaBrycsIHBhbmVLZXk6IDMsIG1zZ0NhdGVnb3J5OiBcInN5c19tc2dfY291bnRcIiB9LFxuICB7IHRpdGxlOiAn56eB5L+hJywgcGFuZUtleTogNSwgbXNnQ2F0ZWdvcnk6IFwibGV0dGVyX21zZ19jb3VudFwiIH0sXG4gIHsgdGl0bGU6ICdA5oiR55qEJywgcGFuZUtleTogNiwgbXNnQ2F0ZWdvcnk6IFwiYXRfbXNnX2NvdW50XCIgfVxuXSlcbmNvbnN0IHRhYnNDaGFuZ2UgPSAob3B0KSA9PiB7XG4gIGNvbnNvbGUubG9nKFwib3B0OiBcIiwgb3B0KVxuICBjb25zb2xlLmxvZyhcInRhYnM6IFwiLCB0YWJzLnZhbHVlKVxuICB0YWJzLnZhbHVlID0gb3B0LnBhbmVLZXlcbn1cbmNvbnN0IG1zZ0NvdW50ID0gcmVmKHtcbiAgYXRfbXNnX2NvdW50OiAwLFxuICBsZXR0ZXJfbXNnX2NvdW50OiAwLFxuICBwb3N0X21zZ19jb3VudDogMCxcbiAgc3lzX21zZ19jb3VudDogMCxcbiAgdGhyZWFkX21zZ19jb3VudDogMFxufSlcbjwvc2NyaXB0PlxuPHRlbXBsYXRlPlxuICA8bnV0LXRhYnMgdi1tb2RlbD1cInRhYnNcIiBzd2lwZWFibGUgYXV0by1oZWlnaHQgQGNoYW5nZT1cInRhYnNDaGFuZ2VcIj5cbiAgICAgIDx0ZW1wbGF0ZSAjdGl0bGVzPlxuICAgICAgICA8dmlldyBjbGFzcz1cInRhYi1saXN0XCI+XG4gICAgICAgICAgPG51dC1iYWRnZSB2LWZvcj1cIml0ZW0gaW4gdGFiTGlzdFwiIDprZXk9XCJpdGVtLnBhbmVLZXlcIiBjbGFzcz1cInRhYi1pdGVtXCIgQGNsaWNrPVwidGFicyA9IGl0ZW0ucGFuZUtleVwiXG4gICAgICAgICAgICA6Y2xhc3M9XCJ7IGFjdGl2ZTogdGFicyA9PT0gaXRlbS5wYW5lS2V5IH1cIiA6dmFsdWU9XCJtc2dDb3VudFtpdGVtLm1zZ0NhdGVnb3J5XVwiIDptYXg9XCI5XCJcbiAgICAgICAgICAgIDpoaWRkZW49XCJtc2dDb3VudFtpdGVtLm1zZ0NhdGVnb3J5XSA9PT0gMFwiIHRvcD1cIjEwXCIgcmlnaHQ9XCItNVwiPiB7eyBpdGVtLnRpdGxlXG4gICAgICAgICAgICB9fTwvbnV0LWJhZGdlPlxuICAgICAgICA8L3ZpZXc+XG4gICAgICA8L3RlbXBsYXRlPlxuICAgIDxudXQtdGFiLXBhbmUgOnBhbmUta2V5PVwiMVwiPlxuICAgICAgICA8dmlldz7kuLvpopg8L3ZpZXc+XG4gICAgICA8L251dC10YWItcGFuZT5cbiAgICA8bnV0LXRhYi1wYW5lIDpwYW5lLWtleT1cIjJcIj5cbiAgICAgICAgPHZpZXc+5biW5a2QPC92aWV3PlxuICAgICAgPC9udXQtdGFiLXBhbmU+XG4gICAgPG51dC10YWItcGFuZSA6cGFuZS1rZXk9XCIzXCI+XG5cdFx0XHQgPHZpZXc+57O757uf5raI5oGvPC92aWV3PlxuICAgICAgPC9udXQtdGFiLXBhbmU+XG4gICAgPG51dC10YWItcGFuZSA6cGFuZS1rZXk9XCI1XCI+XG4gICAgICAgIDx2aWV3PuengeS/oTwvdmlldz5cbiAgICAgIDwvbnV0LXRhYi1wYW5lPlxuICAgIDxudXQtdGFiLXBhbmUgOnBhbmUta2V5PVwiNlwiPlxuICAgICAgICA8dmlldz5A5oiR55qEPC92aWV3PlxuICAgICAgPC9udXQtdGFiLXBhbmU+XG4gIDwvbnV0LXRhYnM+XG48L3RlbXBsYXRlPlxuXG48c3R5bGUgID5cbiAgLnRhYi1saXN0IHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIHBhZGRpbmc6IDEwcHggNXB4O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG4gICAgYm94LXNoYWRvdzogMCAwIDEwcHggcmdiYSgwLCAwLCAwLCAwLjEpO1xuXG4gICAgXG4gIH1cbiAgLnRhYi1pdGVtIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgcGFkZGluZzogMTBweCAxMHB4IDIwcHggMTBweDtcbiAgICAgIGNvbG9yOiBibGFjaztcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICB9XG5cbiAgICAudGFiLWl0ZW0uYWN0aXZlIHtcbiAgICAgIGNvbG9yOiByZWQ7XG4gICAgICBib3JkZXItYm90dG9tOiAycHggc29saWQgcmVkO1xuICAgIH1cblxuPC9zdHlsZT4ifQ==
重现步骤
使用滑动切换tab选项卡,自定义导航区域的 active 类名会丢失,点击切换则不会
期望的结果是什么?
滑动切换,active 样式也可以跟随切换
实际的结果是什么?
一滑动,上面的active 样式就没了
环境信息
No response
其他补充信息
"vue": "^3.3.4"