微信小程序：实现标签与选项卡之间的双向绑定

最新推荐文章于 2023-02-28 15:54:01 发布

DJ7410

最新推荐文章于 2023-02-28 15:54:01 发布

阅读量729

点赞数

文章标签：微信小程序前端 javascript

本文链接：https://blog.csdn.net/qq_53207279/article/details/124659830

版权

实现思路：

给每个标签设置索引 ID，并通过点击事件获取到索引ID。
选项卡使用swiper标签，通过获取到的索引ID改变swiper的索引从而实现点击标签单向绑定选项卡

swiper绑定change事件，获取到swpier索引并绑定到顶部标签实现选中样式的展示，从而实现双向绑定
实现代码：

<view class="kind">
    <view class="kind_button" bindtap="cut" data-id="0"  style="background-color: {{ index == 0 ? '#FDAF04':'#fff'}};color:{{index == 0 ? '#fff':'#000'}};">
        <view>{{kind[0].CHNname}}</view>
        <view>{{kind[0].ENGname}}</view>
    </view>
    <view class="kind_button"bindtap="cut" data-id="1"  style="background-color: {{ index == 1 ? '#FDAF04':'#fff'}};color:{{index == 1 ? '#fff':'#000'}};">
        <view>{{kind[1].CHNname}}</view>
        <view>{{kind[1].ENGname}}</view>
    </view>
    <view class="kind_button"bindtap="cut" data-id="2"  style="background-color: {{ index == 2 ? '#FDAF04':'#fff'}};color:{{index == 2 ? '#fff':'#000'}};">
        <view>{{kind[2].CHNname}}</view>
        <view>{{kind[2].ENGname}}</view>
    </view>
</view>
<swiper current="{{index}}" bindchange="changeindex">
        <swiper-item wx:for="{{kind}}">
            <form bindsubmit="submit">
                <view class="list">
                    <view><text>宠物爱称</text><input name="petname" style="width: 170rpx;"  type="text" placeholder="点击输入"/></view>
                    <view>
                        <text>宠物头像</text>
                    </view>
                    <view><text>品种</text><input name="veriety" type="text"style="width: 170rpx;" placeholder="点击输入  "/></view>
                    <view>
                        <text>宠物出生日期</text>
                        <picker name="date" value="{{selectdate}}" mode="date" bindchange="selectdate">
                            <view>
                                {{selectdate}}
                            </view>
                        </picker>
                    </view>
                    <view>
                        <text>宠物性别</text>
                        <radio-group name="gender">
                            <radio value="gender_m" checked="true">男</radio>
                            <radio value="gender_w">女</radio>
                        </radio-group>
                    </view>
                    <view> 
                        <text>是否绝育</text>
                        <radio-group name="JueYU">
                            <radio value="JueYu_t"  checked="true">是</radio>
                            <radio value="JueYu_f">否</radio>
                        </radio-group>
                    </view>
                </view>
                <button class="BaoCun" form-type="submit">点击保存</button>
            </form>
        </swiper-item>
</swiper>

    data: {
        kind:[
            {ENGname:"CAT",CHNname:"小猫"},
            {ENGname:"DOG",CHNname:"小狗"},
            {ENGname:"OTHER",CHNname:"其他"},
        ],
        // 默认·索引
        index:0,
        petimage:""
    },
     cut(e){
        console.log(e);
        this.setData({
            index:e.currentTarget.dataset.id
        })
    },
        // 改变页面索引
    changeindex(e){
        console.log(e);
        this.setData({
            index:e.detail.current
        })
    },