card-mini/pages/mine/setting/columnsetting.wxml

<cu-custom isCustom="{{false}}" isBack="{{true}}">
    <view slot="content">设置</view>
</cu-custom>
<view class="scroll-content">
    <van-collapse bind:change="onChange" value="{{ activeNames }}">
        <van-collapse-item title="使用说明" name="1">
            <text> 1.可以通过点击条目名称来修改栏目名称\n2.选择开关用来关闭/开启栏目的展示\n3.拖动排序按钮来进行排列条目的展示顺序\n</text>
        </van-collapse-item>
    </van-collapse>
    <!-- 菜单 -->
    <view wx:if="{{menuList.length>0}}" style="width:100%;">
        <view class="group-box" wx:for-item="group" wx:for="{{menuList}}" wx:key="index"
            wx:if="{{group.configColumnGroupStatus=='1'}}">
            <!-- 横向滑动 -->
            <view wx:if="{{group.configColumnGroupDirection=='1'}}">
                <view class="ver-box-title">
                    {{group.configColumnGroupName}}
                </view>
                <movable-area class="movable-area"
                    style="display: {{movableViewInfoX.showClass}};width: {{pageInfoX.scrollHeight+'%'}};height: 128rpx;">

                    <movable-view class='ver-box-items' out-of-bounds='true' damping='999'
                        style='width:{{pageInfoX.rowWidth}}rpx;height: 128rpx;' direction="horizontal"
                        x="{{movableViewInfoX.x}}">

                        <image src="{{imgUrl+movableViewInfoX.data.configColumnPhoto}}" mode="scaleToFill">
                        </image>
                        <text class="text-cut text-df text-black">{{movableViewInfoX.data.configColumnName}}</text>
                        <van-switch checked="{{ movableViewInfoX.data.configColumnSet == '1' }}" size="20px" />
                        <text class="cuIcon-sort" style="font-size:40rpx;">
                        </text>

                    </movable-view>
                </movable-area>

                <scroll-view scroll-x="{{pageInfoX.scrollX}}" style="width: 100%">
                    <view class="ver-box-list">
                        <view class="ver-box-items" data-item="{{item}}" wx:for="{{group.configColumnList}}"
                            wx:for-index="idx" wx:for-item="item" wx:key="idx">
                            <image src="{{imgUrl+item.configColumnPhoto}}" mode="scaleToFill"
                                data-id="{{item.configColumnId}}" data-index="{{index}}" data-idx="{{idx}}"
                                catchtap="showInput">
                            </image>
                            <text class="text-cut text-df text-black" data-id="{{item.configColumnId}}"
                                data-index="{{index}}" data-idx="{{idx}}"
                                catchtap="showInput">{{item.configColumnName}}</text>
                            <van-switch checked="{{ item.configColumnSet == '1' }}" size="20px"
                                data-id="{{item.configColumnId}}" catchtap="doSaveColumnDisplay"
                                style="margin-top: 15rpx;" data-index="{{index}}" data-idx="{{idx}}" />
                        </view>
                    </view>
                </scroll-view>
            </view>
            <!-- 纵向 -->
            <view wx:elif="{{group.configColumnGroupDirection=='2'}}">
                <view class="ver-box-title">
                    {{group.configColumnGroupName}}
                </view>
                <movable-area class="movable-area"
                    style="display: {{movableViewInfo.showClass}};height: {{pageInfo.scrollHeight+'%'}};">
                    <movable-view class='item-box-move' out-of-bounds='true' damping='999'
                        style='height:{{pageInfo.rowHeight}}rpx;' direction="vertical" y="{{movableViewInfo.y}}">
                        <image wx:if="{{movableViewInfo.data.configColumnPhoto.length>0}}" class="cu-avatar radius lg"
                            data-id="{{movableViewInfo.data.configColumnId}}" data-index="{{index}}" data-idx="{{idx}}"
                            catchtap="showInput" src="{{imgUrl + movableViewInfo.data.configColumnPhoto}}"
                            mode="scaleToFill"></image>
                        <view class="item-content" data-id="{{movableViewInfo.data.configColumnId}}"
                            data-index="{{index}}" data-idx="{{idx}}" catchtap="showInput">
                            <text class="text-cut text-black text-bold">{{movableViewInfo.data.configColumnName}}</text>
                            <text class="text-cut text-gray">原名称:{{movableViewInfo.data.configColumnRemark}}</text>
                        </view>
                        <view class="action" style="display: flex;align-items: center;justify-content: center;">
                            <view data-id="{{movableViewInfo.data.configColumnId}}" catchtap="doSaveColumnDisplay"
                                data-index="{{index}}" data-idx="{{idx}}">
                                <van-switch checked="{{ movableViewInfo.data.configColumnSet == '1' }}" size="20px" />
                            </view>
                            <text class="cuIcon-sort" style="margin-left: 15rpx;font-size:40rpx;">
                            </text>
                        </view>
                    </movable-view>
                </movable-area>
                <scroll-view scroll-y="{{pageInfo.scrollY}}" style="height: {{pageInfo.scrollHeight+'%'}}">
                    <view wx:for="{{group.configColumnList}}" wx:for-item="item"
                        data-path="{{item.configColumnTargetUrl}}" data-type="{{item.configColumnTargetMode}}"
                        wx:for-index="idx" wx:key="idx" data-item="{{item}}" class="item-box">
                        <image wx:if="{{item.configColumnPhoto.length>0}}" class="cu-avatar radius lg"
                            data-id="{{item.configColumnId}}" data-index="{{index}}" data-idx="{{idx}}"
                            catchtap="showInput" src="{{imgUrl + item.configColumnPhoto}}" mode="scaleToFill"></image>
                        <view class="item-content" data-id="{{item.configColumnId}}" data-index="{{index}}"
                            data-idx="{{idx}}" catchtap="showInput">
                            <text class="text-cut text-black text-bold">{{item.configColumnName}}</text>
                            <text class="text-cut text-gray">原名称:{{item.configColumnRemark}}</text>
                        </view>
                        <view class="action" style="display: flex;align-items: center;justify-content: center;">
                            <view data-id="{{item.configColumnId}}" catchtap="doSaveColumnDisplay"
                                data-index="{{index}}" data-idx="{{idx}}">
                                <van-switch checked="{{ item.configColumnSet == '1' }}" size="20px" />
                            </view>
                            <text class="cuIcon-sort" style="margin-left: 15rpx;font-size:40rpx;" data-index='{{index}}'
                                data-idx="{{idx}}" bindtouchstart='dragStart' bindtouchmove='dragMove'
                                bindtouchend='dragEnd'>
                            </text>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
    <view wx:else style="margin-top:200rpx;width:100%;">
        <van-empty description="暂无数据" />
    </view>
</view>
<!-- 文本内容弹框 -->
<van-action-sheet show="{{ isShowInput }}" title="栏目名称修改" bind:close="onHide" data-type="5"
    style="padding-bottom:180rpx;">
    <view class="flex flex-direction align-center" style="margin-top:10rpx;padding-bottom:30rpx;">
        <input id="linkStr" placeholder="请输入栏目名称"
            style="width:90%;border:1rpx solid #DFDFDF;padding:8rpx;line-height:70rpx;height:70rpx; border-radius:3rpx;"
            value="{{inputColumnName}}" bindinput="textInput" />
        <view class="cu-btn bg-blue radius margin-top-sm" style="width:30%;" bindtap="addName">保存</view>
    </view>
</van-action-sheet>