小程序实现滑动块效果

本文实例为大家分享了小程序实现滑动块效果的具体代码，供大家参考，具体内容如下

当你在复制的时候 一定要 把js 逻辑的 list 数据更改就行了

小程序的css样式

.box {
    width: 100vw;
    background: #F2F2F2;
    transition: all 3s;
}

.box-b {
    height: 8vh;
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: #FAFAFA;
    align-items: center;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.box-r1 {
    font-size: 24rpx;
    color: red;
}

.box-r2 {
    font-size: 28rpx;
    padding: 20rpx 50rpx;
    border-radius: 50rpx;
    color: #fff;
    background-color: #FF6C3B;
}

.box-t {
    height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 25rpx;
}

.box-top {
    width: 90vw;
    height: 22vw;
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.boxs {
    width: 105vw;
    height: 20vw;
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.boxs-1 {
    width: 100vw;
    height: 20vw;
    background: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 10rpx 0;
    border-radius: 10px;
    margin-left: 20px;
}

.boxs-1 > view:first-child {
    width: 10vw;
    line-height: 18vw;
    text-align: center;
    /* background: #ccc; */
    height: 20vw;
}

.boxs-1 > view:nth-child(2) {
    width: 20vw;
    /* background: #ccc; */
    height: 100%;
    border-radius: 20rpx;
}

image {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
}

.boxs-1 > view:last-child {
    width: 60vw;
    /* background: #ccc; */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.boxs-1 > view:last-child>view{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: relative;
    left: 30rpx;
}
text {
    width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boxs-2 {
    width: 120rpx;
    height: 170rpx;
    text-align: center;
    line-height: 170rpx;
    background: #e64340;
    font-size: 24rpx;
    color: #fff;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.red_cart{
    color: red;
    position: relative;
    right: 40px;
}

小程序的wxml样式

<view class="box">
    <view class="box-t">
        <movable-area class="box-top" wx:for="{{list}}" wx:key="index">
            <movable-view class="boxs"
                          direction="horizontal"
                          animation="{{true}}"
                          inertia="true"
                          out-of-bounds="false"
            >
                <view class="boxs-1">
                    <view>
                        <checkbox checked="{{selected}}" wx:key="index" bindtap="chec" data-selected="{{item}}"></checkbox>
                    </view>
                    <view>
                        <image src="{{item.pic}}"></image>
                    </view>
                    <view class="cart_list">
                        <text>{{item.name}}</text>
                        <view>
                            <view class="red_cart">￥{{item.price}}</view>
                            <view>
                                <van-stepper class="cart_vant"
                                        value="{{ item.number }}"
                                        bind:change="onChange" data-key="{{item.key}}"/>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="boxs-2" bindtap="del" data-key="{{item.key}}">删除</view>
            </movable-view>
        </movable-area>
    </view>
    <view class="box-b">
        <view class="box-r1">合计:￥{{price}}</view>
        <view class="box-r2">去结算</view>
    </view>
</view>

小程序js

// pages/sales/sales.js
let {
    getShop,
    getRemove,
    modifyNumber,
    getSelected
} = require('../../http/api')
Page({
    onShareAppMessage() {
        return {
            title: 'movable-view',
            path: 'page/component/pages/movable-view/movable-view'
        }
    },

    data: {
        x: 0,
        scale: 2,
        list: [],//可以现在 list定义数据 测试使用
        price: 0,
        selected: []
    },
    del(e) {
        console.log(e.currentTarget.dataset.key)
        var keys = e.currentTarget.dataset.key
        var token = wx.getStorageSync('token')
        getRemove(token, keys).then(res => {
            // console.log(res)
        })
        this.getShop()
    },
    onChange(e) {
        console.log(e.currentTarget.dataset.key)
        console.log(e.detail)
        var token = wx.getStorageSync('token')
        var key = e.currentTarget.dataset.key
        var number = e.detail
        modifyNumber(token, key, number).then(res => {
            // console.log(res)
        })
        this.getShop()
    },
    tap() {
        this.setData({
            x: 0,
        })
    },
    getShop() {
        getShop().then(res => {
            this.setData({
                list: res.items
            })
        })
    },
    chec(e) {
        this.getShop()
    },
    onLoad: function (options) {
        getShop().then(res => {
            this.setData({
                list: res.items
            })
            this.data.list.forEach(i => {
                var token = wx.getStorageSync('token')
                var key = i.key
                var selected = i.selected
                this.setData({
                    selected: selected
                })
                getSelected(token, key, selected).then(res => {
                    this.setData({
                        price: res.data.price
                    })
                })
            })


        })

    },
    onShow: function () {
        this.getShop()
        if (wx.getStorageSync('token')) {
            wx.hideLoading()
        } else {
            wx.showLoading({
                title: '请登录',
            })
        }
    },


    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },


    onReady: function () {

    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持猪先飞。