本文实例为大家分享了小程序实现滑动块效果的具体代码，供大家参考，具体内容如下
当你在复制的时候 一定要 把js 逻辑的 list 数据更改就行了
小程序的css样式
.box {
width : 100 vw;
background : #F2F2F2 ;
transition: all 3 s;
}
.box-b {
height : 8 vh;
width : 100% ;
display : flex;
justify- content : space-between;
background-color : #FAFAFA ;
align-items: center ;
padding : 0 30 rpx;
box-sizing: border-box;
}
.box-r 1 {
font-size : 24 rpx;
color : red ;
}
.box-r 2 {
font-size : 28 rpx;
padding : 20 rpx 50 rpx;
border-radius: 50 rpx;
color : #fff ;
background-color : #FF6C3B ;
}
.box-t {
height : 92 vh;
overflow-y: auto ;
overflow-x: hidden ;
padding : 0 25 rpx;
}
.box- top {
width : 90 vw;
height : 22 vw;
margin-top : 20 rpx;
display : flex;
flex- direction : column;
justify- content : space-around;
}
.boxs {
width : 105 vw;
height : 20 vw;
margin-top : 20 rpx;
display : flex;
flex- direction : row;
justify- content : space-around;
}
.boxs -1 {
width : 100 vw;
height : 20 vw;
background : white ;
display : flex;
flex- direction : row;
justify- content : space-around;
padding : 10 rpx 0 ;
border-radius: 10px ;
margin-left : 20px ;
}
.boxs -1 > view:first-child {
width : 10 vw;
line-height : 18 vw;
text-align : center ;
/* background: #ccc; */
height : 20 vw;
}
.boxs -1 > view:nth-child( 2 ) {
width : 20 vw;
/* background: #ccc; */
height : 100% ;
border-radius: 20 rpx;
}
image {
width : 100% ;
height : 100% ;
border-radius: 20 rpx;
}
.boxs -1 > view:last-child {
width : 60 vw;
/* 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 : 30 rpx;
}
text {
width : 60 vw;
overflow : hidden ;
text- overflow : ellipsis;
white-space : nowrap ;
}
.boxs -2 {
width : 120 rpx;
height : 170 rpx;
text-align : center ;
line-height : 170 rpx;
background : #e64340 ;
font-size : 24 rpx;
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 () {
},
/**
* 用户点击右上角分享
*/
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/DanielBlackCat/article/details/115872212
dy("nrwz");