小程序实现滑动块效果
作者：Daniel·M·water
这篇文章主要为大家详细介绍了小程序实现滑动块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序实现滑动块效果的具体代码，供大家参考，具体内容如下
当你在复制的时候 一定要 把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 () {
},
/**
* 用户点击右上角分享
*/
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。