微信小程序点击增加一个项

最新推荐文章于 2024-07-24 15:52:47 发布

原创最新推荐文章于 2024-07-24 15:52:47 发布 · 4.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

小程序专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在微信小程序中实现用户点击按钮时动态添加新的列表项，详细讲解了相关API的使用方法和数据绑定过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<view class="weui-cells">
            <view class="weui-cell weui-cell_input" wx:for-items="{{optionList}}" wx:key="{{index}}">
                <view class="weui-cell__hd">
                    <image bindtap="delOption" src="{{item.icon}}" class="option-icon" data-index="{{index}}"></image>
                </view>
                <view class="weui-cell__bd"><input bindinput="recordValue" class="weui-input"  data-index="{{index}}" value="{{item.value}}" placeholder="选项{{index + 1}}" /></view>
            </view>
            <view class="weui-cell" bindtap="addOption" wx:if="{{showAddBtn}}" >
                <view class="weui-cell__hd">
                    <image src="/images/common/4.png" class="option-icon"></image>
                </view>
                <view class="weui-cell__bd">添加选项</view>
            </view>
        </view>

Page({
    data: {
        optionList: [
            {
                icon: ''
            },
            {
                icon: ''
            }
        ],
        showAddBtn: 1
    },
    recordValue: function (e){
        let _optionList = this.data.optionList;
        let _index = e.target.dataset.index;
        let value = e.detail.value;
        _optionList[_index].value = value;
        this.setData({optionList: _optionList});
    },
    addOption: function (e){
        let _optionList = this.data.optionList;
        _optionList.push({icon: '/images/common/5.png'})
        this.setData({optionList: _optionList});
        // 选项大于15个后移除添加按钮
        if(_optionList.length >= 15) {
            this.setData({showAddBtn: 0});
        } else if (_optionList.length < 15){
          this.setData({ showAddBtn: 1 });
        }
    },
    delOption: function (e){
        let _index = e.target.dataset.index;
        let _optionList = this.data.optionList;

        _optionList.splice(_index, 1);

        this.setData({optionList: _optionList});
        if(_optionList.length < 15) {
          this.setData({ showAddBtn: 1 });
        }
    }
})

@import 'style/weui.wxss';

.option-icon {
    margin-right: 5px;
    vertical-align: middle;
    width:20px;
    height: 20px;
}
.weui-select_in-select-after {
    text-align: right;
}