input控件的bindconfirm事件响应存在bug
发布于 5 年前 作者 swu 8020 次浏览 来自 问答

在开发小程序的过程中发现，input控件的bindconfirm响应函数中event的数据存在问题，event.detail.value保存的是之前一次确认的文字，而非当前input控件中的文字，能否帮忙看一下，谢谢。

2 回复

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"
            type="text"
            />
    </view>
    <view class="search-music-list" wx:for="{{musicList}}" wx:for-item="item">
        <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
//获取应用实例
const searchUrlPattern = "http://mobilecdn.kugou.com/api/v3/search/song?format=json&keyword={0}&page={1}&pagesize={2}&showtype=1";
const 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(event.detail.value, 5, 0);
        console.log(event);
        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);
            }
        })
    }
})

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%
}

辛苦贴一段比较简单可重现的代码，谢谢。

回到顶部