小程序
小游戏
企业微信
微信支付
扫描小程序码分享
当我配合使用wx:key属性时，如果我循环的数组发生了变动，那么会导致列表渲染只渲染数组中的第一个数据，并且渲染的个数也不正确
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
能给下测试demo么？
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
好的，谢谢！
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字
*this
index.wxml代码如下：
<!--index.wxml-->
<
view
class
=
"search-music-container"
>
"search-music-search"
input
"search-music-input"
placeholder
"搜索音乐、歌手、歌词、用户"
placeholder-class
"search-music-input-placeholder"
bindconfirm
"onSearhTextConfirm"
bindinput
"onSearchTextChanged"
type
"text"
/>
</
"search-music-list"
wx:for
"{{musicList}}"
wx:key
"*this"
hover
"{{true}}"
hover-class
"search-music-item-hover"
"search-music-item"
data-hash
"{{item.hash}}"
data-item
"{{item}}"
bindtap
"onMusicItemClick"
text
"search-music-title"
>{{item.songname}}</
"search-music-author"
>{{item.singername}}</
wx:if
"{{index < musicList.length - 1}}"
"search-music-item-seperator"
></
index.js代码如下：
//index.js
//获取应用实例
var
initData =
'this is first line\nthis is second line'
extraLine = [];
searchUrlPattern =
"http://mobilecdn.kugou.com/api/v3/search/song?format=json&keyword={0}&page={1}&pagesize={2}&showtype=1"
;
getMusicUrlPattern =
"http://m.kugou.com/app/i/getSongInfo.php?hash={0}&cmd=playInfo"
String.format =
function
() {
if
(arguments.length == 0) {
return
null
}
str = arguments[0];
for
(
i = 1; i < arguments.length; i++) {
re =
new
RegExp(
'\\{'
+ (i-1) +
'\\}'
,
'gm'
);
str = str.replace(re, arguments[i]);
str;
getSearchMusicUrl(keyword, pageSize, pageIndex) {
String.format(searchUrlPattern, keyword, pageIndex, pageSize);
getMusicUrl(hash) {
String.format(getMusicUrlPattern, hash);
Page({
data: {
musicList: [],
searchText:
""
},
onMusicItemClick:
(event) {
args = event.currentTarget.dataset;
item = args.item;
url = getMusicUrl(args.hash);
wx.request({
url: url,
success:
(res) {
mp3url = res.data.url;
wx.playBackgroundAudio({
dataUrl: mp3url
});
onSearhTextConfirm:
that =
this
requestUrl = getSearchMusicUrl(
.data.searchText, 5, 0);
console.log(requestUrl);
url: requestUrl,
console.log(res);
data = res.data;
info = data.data.info;
that.setData({
musicList: info
fail:
(err) {
console.log(err);
complete:
})
onSearchTextChanged:
.setData({
searchText: event.detail.value
index.wxss代码如下：
/**index.wxss**/
.search-music-container {
height
:
100%
display
: flex;
flex-
direction
: column;
.search-music-search {
width
: row;
.search-music-input {
padding-top
15
rpx;
padding-left
padding-bottom
font-size
30
.search-music-input-placeholder {
.search-music-list {
.search-music-item {
.search-music-item-hover {
background
#F0F0F0
.search-music-title {
color
#050505
43
rpx
.search-music-author {
#777777
.search-music-item-seperator {
2
具体的请求返回的数据我已经在控制台打印出来了，如下图所示：
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
能给下测试demo么？
好的，谢谢！
保留关键字
*this代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字index.wxml代码如下：
<!--index.wxml--><viewclass="search-music-container"><viewclass="search-music-search"><inputclass="search-music-input"placeholder="搜索音乐、歌手、歌词、用户"placeholder-class="search-music-input-placeholder"bindconfirm="onSearhTextConfirm"bindinput="onSearchTextChanged"type="text"/></view><viewclass="search-music-list"wx:for="{{musicList}}"wx:key="*this"><viewhover="{{true}}"hover-class="search-music-item-hover"class="search-music-item"data-hash="{{item.hash}}"data-item="{{item}}"bindtap="onMusicItemClick"><textclass="search-music-title">{{item.songname}}</text><textclass="search-music-author">{{item.singername}}</text></view><viewwx:if="{{index < musicList.length - 1}}"class="search-music-item-seperator"></view></view></view>index.js代码如下：
//index.js//获取应用实例varinitData ='this is first line\nthis is second line'varextraLine = [];varsearchUrlPattern ="http://mobilecdn.kugou.com/api/v3/search/song?format=json&keyword={0}&page={1}&pagesize={2}&showtype=1";vargetMusicUrlPattern ="http://m.kugou.com/app/i/getSongInfo.php?hash={0}&cmd=playInfo";String.format =function() {if(arguments.length == 0) {returnnull;}varstr = arguments[0];for(vari = 1; i < arguments.length; i++) {varre =newRegExp('\\{'+ (i-1) +'\\}','gm');str = str.replace(re, arguments[i]);}returnstr;}functiongetSearchMusicUrl(keyword, pageSize, pageIndex) {returnString.format(searchUrlPattern, keyword, pageIndex, pageSize);}functiongetMusicUrl(hash) {returnString.format(getMusicUrlPattern, hash);}Page({data: {musicList: [],searchText:""},onMusicItemClick:function(event) {varargs = event.currentTarget.dataset;varitem = args.item;varurl = getMusicUrl(args.hash);wx.request({url: url,success:function(res) {varmp3url = res.data.url;wx.playBackgroundAudio({dataUrl: mp3url});}});},onSearhTextConfirm:function(event) {varthat =this;varrequestUrl = getSearchMusicUrl(this.data.searchText, 5, 0);console.log(requestUrl);wx.request({url: requestUrl,success:function(res) {console.log(res);vardata = res.data;varinfo = data.data.info;that.setData({musicList: info});},fail:function(err) {console.log(err);},complete:function(err) {console.log(err);}})},onSearchTextChanged:function(event) {this.setData({searchText: event.detail.value});}})index.wxss代码如下：
/**index.wxss**/.search-music-container {height:100%;display: flex;flex-direction: column;}.search-music-search {width:100%;display: flex;flex-direction: row;}.search-music-input {padding-top:15rpx;padding-left:15rpx;padding-bottom:15rpx;font-size:30rpx;width:100%;}.search-music-input-placeholder {font-size:30rpx;}.search-music-list {height:100%;}.search-music-item {padding-top:15rpx;padding-bottom:15rpx;padding-left:15rpx;display: flex;flex-direction: column;}.search-music-item-hover {padding-top:15rpx;padding-bottom:15rpx;padding-left:15rpx;display: flex;flex-direction: column;background:#F0F0F0;}.search-music-title {color:#050505;font-size:43rpx}.search-music-author {color:#777777;font-size:30rpx;}.search-music-item-seperator {background:#F0F0F0;height:2rpx;width:100%}具体的请求返回的数据我已经在控制台打印出来了，如下图所示：