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

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

小程序的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;        height: 20vw;}.boxs-1 > view:nth-child(2) {    width: 20vw;        height: 100%;    border-radius: 20rpx;}image {    width: 100%;    height: 100%;    border-radius: 20rpx;}.boxs-1 > view:last-child {    width: 60vw;        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.jslet {    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 () {    },    })

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