小程序实现滑动块的实现具体代码是什么-群英

上一篇：如何用vue实现一个商城的商品选项卡效果下一篇：基于vue开发秒杀倒计时功能的思路和代码是什么

在日常操作或是项目的实际应用中，有不少朋友对于“小程序实现滑动块的实现具体代码是什么”的问题会存在疑惑，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。

小程序实现滑动块效果的具体代码如下

当你在复制的时候一定要把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 () { }, /** * 用户点击右上角分享 */ })