怎么在小程序中实现一个滑动块效果

这期内容当中小编将会给大家带来有关怎么在小程序中实现一个滑动块效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

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

    },

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

上述就是小编为大家分享的怎么在小程序中实现一个滑动块效果了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。