这期内容当中小编将会给大家带来有关怎么在小程序中实现一个滑动块效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
小程序的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 () {
},
/**
* 用户点击右上角分享
*/
})上述就是小编为大家分享的怎么在小程序中实现一个滑动块效果了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
