WXOPEN Club

wxml中的wx:key属性使用之后出现问题

发布于 7 年前作者 yongliang9982 次浏览最后编辑 7 年前来自 ask

当我配合使用wx:key属性时，如果我循环的数组发生了变动，那么会导致列表渲染只渲染数组中的第一个数据，并且渲染的个数也不正确

4 回复
xiongqiang
xiongqiang1 楼6 年前

能给下测试demo么？

xiuying55
xiuying552 楼6 年前

好的，谢谢！

molei
molei3 楼6 年前

保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字

zjin
zjin4 楼5 年前

index.wxml代码如下：

<!--index.wxml-->
<view class="search-music-container">
    <view class="search-music-search">
        <input
            class="search-music-input"
            placeholder="搜索音乐、歌手、歌词、用户"
            placeholder-class="search-music-input-placeholder"
            bindconfirm="onSearhTextConfirm"
            bindinput="onSearchTextChanged"
            type="text"
            />
    </view>
    <view class="search-music-list" wx:for="{{musicList}}" wx:key="*this">
        <view hover="{{true}}" hover-class="search-music-item-hover" class="search-music-item" data-hash="{{item.hash}}" data-item="{{item}}" bindtap="onMusicItemClick">
            <text class="search-music-title">{{item.songname}}</text>
            <text class="search-music-author">{{item.singername}}</text>
        </view>
 
        <view wx:if="{{index < musicList.length - 1}}" class="search-music-item-seperator"></view>
    </view>
</view>

index.js代码如下：

//index.js
//获取应用实例
var initData = 'this is first line\nthis is second line'
var extraLine = [];
 
var searchUrlPattern = "http://mobilecdn.kugou.com/api/v3/search/song?format=json&keyword={0}&page={1}&pagesize={2}&showtype=1";
var getMusicUrlPattern = "http://m.kugou.com/app/i/getSongInfo.php?hash={0}&cmd=playInfo";
 
String.format = function() {
    if (arguments.length == 0) {
        return null;
    }
 
    var str = arguments[0];
    for (var i = 1; i < arguments.length; i++) {
        var re = new RegExp('\\{' + (i-1) + '\\}', 'gm');
        str = str.replace(re, arguments[i]);
    }
 
    return str;
}
 
function getSearchMusicUrl(keyword, pageSize, pageIndex) {
    return String.format(searchUrlPattern, keyword, pageIndex, pageSize);
}
 
function getMusicUrl(hash) {
    return String.format(getMusicUrlPattern, hash);
}
 
Page({
    data: {
        musicList: [],
        searchText: ""
    },
    onMusicItemClick: function(event) {
        var args = event.currentTarget.dataset;
        var item = args.item;
        var url = getMusicUrl(args.hash);
        wx.request({
            url: url,
            success: function(res) {
                var mp3url = res.data.url;
 
                wx.playBackgroundAudio({
                    dataUrl: mp3url
                });
            }
        });
    },
    onSearhTextConfirm: function(event) {
        var that = this;
        var requestUrl = getSearchMusicUrl(this.data.searchText, 5, 0);
        console.log(requestUrl);
        wx.request({
            url: requestUrl,
            success: function(res) {
                console.log(res);
                var data = res.data;
                var info = 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%
}

具体的请求返回的数据我已经在控制台打印出来了，如下图所示：