怎么在小程序中實現一個滑動塊效果

這期內容當中小編將會給大家帶來有關怎么在小程序中實現一個滑動塊效果，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

小程序的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 () {

    },

    /**
     * 用戶點擊右上角分享
     */
})

上述就是小編為大家分享的怎么在小程序中實現一個滑動塊效果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。