小程序實現(xiàn)滑動塊效果
更新時間：2021年04月21日 11:04:30 作者：Daniel·M·water
這篇文章主要為大家詳細介紹了小程序實現(xiàn)滑動塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了小程序實現(xiàn)滑動塊效果的具體代碼，供大家參考，具體內容如下
當你在復制的時候 一定要 把js 邏輯的 list 數(shù)據(jù)更改就行了
小程序的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: [],//可以現(xiàn)在 list定義數(shù)據(jù) 測試使用
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: '請登錄',
})
}
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
onReady: function () {
},
/**
* 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)選擇內容顯示對應內容，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
24行JavaScript代碼實現(xiàn)Redux的方法實例
這篇文章主要給大家介紹了關于如何利用24行JavaScript代碼實現(xiàn)Redux的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)省市級聯(lián)效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細介紹了JS HTML5實現(xiàn)拖拽移動列表效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
本篇文章主要介紹了微信小程序-閱讀小程序實例（demo），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了JavaScript 作用域,結合實例形式分析了JavaScript函數(shù)作用域相關概念、原理及操作注意事項,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了理解JavaScript設計模式中的建造者模式,文章基于JavaScript的相關資料展開箱子內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04
replace方法的語法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正則表達式對象(RegExp)也可以是字符串(string)，replaceText是替代查找到的字符串。。為了幫助大家更好的理解，下面舉個簡單例子說明一下2008-02-02
最近在做Web 頁面，雖然不是很喜歡，不過既然公司安排了，就好好做吧，還是學了不少東西。2009-06-06
javascript的tab切換原理與效果實現(xiàn)方法
這篇文章主要介紹了javascript的tab切換原理與效果實現(xiàn)方法,實例分析了簡單的tab切換實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01