本文实例为大家分享了小程序实现滑动块效果的具体代码，供大家参考，具体内容如下
当你在复制的时候 一定要 把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样式
{{item.name}} ￥{{item.price}} 删除 合计:￥{{price}} 去结算
小程序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 () {
},
/**
* 用户点击右上角分享
*/
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有