スライダー効果を実装するミニプログラム

。箱 {
    幅：100vw;
    背景: #F2F2F2;
    遷移: すべて 3;
}

.box-b {
    高さ: 8vh;
    幅: 100%;
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースの間;
    背景色: #FAFAFA;
    アイテムの位置を中央揃えにします。
    パディング: 0 30rpx;
    ボックスのサイズ: 境界線ボックス;
}

.box-r1 {
    フォントサイズ: 24rpx;
    色: 赤;
}

.box-r2 {
    フォントサイズ: 28rpx;
    パディング: 20rpx 50rpx;
    境界線の半径: 50rpx;
    色: #fff;
    背景色: #FF6C3B;
}

.box-t {
    高さ：92vh;
    オーバーフロー-y: 自動;
    オーバーフロー-x:非表示;
    パディング: 0 25rpx;
}

.ボックストップ{
    幅：90vw;
    高さ：22vw;
    上マージン: 20rpx;
    ディスプレイ: フレックス;
    flex-direction: 列;
    コンテンツの両端揃え: スペースを空ける;
}

.ボックス{
    幅：105vw;
    高さ：20vw;
    上マージン: 20rpx;
    ディスプレイ: フレックス;
    flex-direction: 行;
    コンテンツの両端揃え: スペースを空ける;
}

.ボックス-1 {
    幅：100vw;
    高さ：20vw;
    背景: 白;
    ディスプレイ: フレックス;
    flex-direction: 行;
    コンテンツの両端揃え: スペースを空ける;
    パディング: 10rpx 0;
    境界線の半径: 10px;
    左マージン: 20px;
}

.boxs-1 > ビュー:最初の子 {
    幅: 10vw;
    行の高さ: 18vw;
    テキスト配置: 中央;
    /* 背景: #ccc; */
    高さ：20vw;
}

.boxs-1 > ビュー:n番目の子(2) {
    幅: 20vw;
    /* 背景: #ccc; */
    高さ: 100%;
    境界線の半径: 20rpx;
}

画像 {
    幅: 100%;
    高さ: 100%;
    境界線の半径: 20rpx;
}

.boxs-1 > ビュー:最後の子 {
    幅：60vw;
    /* 背景: #ccc; */
    高さ: 100%;
    ディスプレイ: フレックス;
    flex-direction: 列;
    コンテンツの両端揃え: スペースを空ける;
}
.boxs-1 > ビュー:最後の子>ビュー{
    ディスプレイ: フレックス;
    flex-direction: 行;
    コンテンツの両端揃え: スペースを空ける;
    位置: 相対的;
    左: 30rpx;
}
文章 {
    幅：60vw;
    オーバーフロー: 非表示;
    テキストオーバーフロー: 省略記号;
    空白: ラップなし;
}

.ボックス-2 {
    幅: 120rpx;
    高さ: 170rpx;
    テキスト配置: 中央;
    行の高さ: 170rpx;
    背景: #e64340;
    フォントサイズ: 24rpx;
    色: #fff;
    右上の境界線の半径: 10px;
    右下の境界線の半径: 10px;
}
.red_cart{
    色: 赤;
    位置: 相対的;
    右: 40px;
}

<ビュークラス="ボックス">
    <ビュークラス="box-t">
        <移動可能領域 class="box-top" wx:for="{{list}}" wx:key="index">
            <movable-view class="boxes"
                          方向="水平"
                          アニメーション="{{true}}"
                          慣性="true"
                          範囲外="false"
            >
                <view class="boxs-1">
                    <表示>
                        <チェックボックスがチェックされています="{{selected}}" wx:key="index" bindtap="chec" data-selected="{{item}}"></チェックボックス>
                    </ビュー>
                    <表示>
                        <画像 src="{{item.pic}}"></画像>
                    </ビュー>
                    <view class="cart_list">
                        <テキスト>{{アイテム名}}</テキスト>
                        <表示>
                            <view class="red_cart">￥{{item.price}}</view>
                            <表示>
                                <van-stepper class="cart_vant"
                                        値="{{ アイテム番号 }}"
                                        bind:change="onChange" データキー="{{item.key}}"/>
                            </ビュー>
                        </ビュー>
                    </ビュー>
                </ビュー>
                <view class="boxs-2" bindtap="del" data-key="{{item.key}}">削除</view>
            </可動ビュー>
        </可動領域>
    </ビュー>
    <ビュークラス="box-b">
        <view class="box-r1">合計金額: ￥{{price}}</view>
        <view class="box-r2">チェックアウトへ進む</view>
    </ビュー>
</ビュー>

// ページ/セールス/セールス.js
させて {
    ゲットショップ、
    取得削除、
    数値の変更、
    選択されたもの
} = require('../../http/api')
ページ（{
    onShareAppMessage() {
        戻る {
            タイトル: 'movable-view',
            パス: 'page/component/pages/movable-view/movable-view'
        }
    },

    データ： {
        x: 0,
        スケール: 2,
        list: [], //price: 0, を使用してリストデータテストを定義できるようになりました。
        選択: []
    },
    削除(e) {
        console.log(e.currentTarget.dataset.key)
        var キー = e.currentTarget.dataset.key
        var トークン = wx.getStorageSync('トークン')
        getRemove(トークン、キー)。その後(res => {
            // コンソール.log(res)
        })
        この.getShop()
    },
    onChange(e) {
        console.log(e.currentTarget.dataset.key)
        コンソールログ(e.detail)
        var トークン = wx.getStorageSync('トークン')
        var キー = e.currentTarget.dataset.key
        var 番号 = e.detail
        トークン、キー、数値を変更します。その後、res => {
            // コンソール.log(res)
        })
        この.getShop()
    },
    タップ（）{
        this.setData({
            x: 0,
        })
    },
    getShop() {
        getShop().then(res => {
            this.setData({
                リスト: res.items
            })
        })
    },
    チェック(e) {
        この.getShop()
    },
    onLoad: 関数 (オプション) {
        getShop().then(res => {
            this.setData({
                リスト: res.items
            })
            this.data.list.forEach(i => {
                var トークン = wx.getStorageSync('トークン')
                var キー = i.key
                var 選択 = i.選択
                this.setData({
                    選択済み: 選択済み
                })
                getSelected(トークン、キー、選択された)。その後(res => {
                    this.setData({
                        価格: res.data.price
                    })
                })
            })


        })

    },
    onShow: 関数() {
        この.getShop()
        wx.getStorageSync('トークン')の場合{
            wx.hideLoading()
        } それ以外 {
            wx.showLoading({
                タイトル: 「ログインしてください」
            })
        }
    },


    /**
     * ライフサイクル機能 - ページの非表示を監視する*/
    onHide: 関数 () {

    },

    /**
     * ライフサイクル機能 - ページのアンインストールを監視する*/
    onUnload: 関数 () {

    },


    onReady: 関数 () {

    },
    /**
     * ページ関連のイベント処理関数 - ユーザーのプルダウンアクションをリッスンする */
    onPullDownRefresh: 関数 () {

    },

    /**
     * ページ上のボトムイベントを処理する関数*/
    onReachBottom: 関数 () {

    },

    /**
     * ユーザーは右上隅をクリックして共有します*/
})