- 所在位置：
- 首頁 >
- 編程技術(shù) >
- JavaScript >
- 小程序?qū)崿F(xiàn)滑動(dòng)塊的實(shí)現(xiàn)具體代碼是什么
小程序?qū)崿F(xiàn)滑動(dòng)塊的實(shí)現(xiàn)具體代碼是什么
Admin 2022-10-21 群英技術(shù)資訊 699 次瀏覽
在日常操作或是項(xiàng)目的實(shí)際應(yīng)用中，有不少朋友對(duì)于“小程序?qū)崿F(xiàn)滑動(dòng)塊的實(shí)現(xiàn)具體代碼是什么”的問題會(huì)存在疑惑，下面小編給大家整理和分享了相關(guān)知識(shí)和資料，易于大家學(xué)習(xí)和理解，有需要的朋友可以借鑒參考，下面我們一起來了解一下吧。小程序實(shí)現(xiàn)滑動(dòng)塊效果的具體代碼如下
當(dāng)你在復(fù)制的時(shí)候 一定要 把js 邏輯的 list 數(shù)據(jù)更改就行了
小程序的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" >合計(jì):￥{{price}}</ view > < view class = "box-r2" >去結(jié)算</ 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: '請(qǐng)登錄' , }) } }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function () { }, onReady: function () { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點(diǎn)擊右上角分享 */ }) |
以上就是關(guān)于“小程序?qū)崿F(xiàn)滑動(dòng)塊的實(shí)現(xiàn)具體代碼是什么”的介紹了，感謝各位的閱讀，希望這篇文章能幫助大家解決問題。如果想要了解更多知識(shí)，歡迎關(guān)注群英網(wǎng)絡(luò)，小編每天都會(huì)為大家更新不同的知識(shí)。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：[email protected]進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，查實(shí)之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。
猜你喜歡
-
JavaScript全局函有多少，怎么樣應(yīng)用
本篇文章給大家?guī)砹薐avaScript中關(guān)于全局函數(shù)的相關(guān)知識(shí)，JavaScript中的全局函數(shù)有很多，下面我們一起來看一下應(yīng)該怎樣使用，希望對(duì)大家有幫助。
-
用vue的動(dòng)態(tài)組件怎樣做tab切換？有什么好處？
對(duì)于實(shí)現(xiàn)tab切換效果的方法我們之前也了解了很多，本文給大家分享用用vue的動(dòng)態(tài)組件實(shí)現(xiàn)tab切換效果的方法，小編覺得使用vue的動(dòng)態(tài)組件去實(shí)現(xiàn)tab的切換效果，會(huì)比較方便。
-
vue.js watch總失效什么情況，如何解決
這篇文章主要給大家介紹了關(guān)于vue.js watch經(jīng)常失效的場景與解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
-
JS中require方法怎樣用？require的加載規(guī)則你知嗎？
JS中require方法怎樣用？一些新手對(duì)于node.js中require方法不是很了解，對(duì)此這篇文章就主要給大家分享一下node.js中require方法以及加載規(guī)則，有著方面學(xué)習(xí)需求的朋友就接著看吧。
-
用JS做輪播跑馬燈原理是什么，具體如何操作
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)圖片輪播跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
推薦內(nèi)容
- CSS中flex布局如何實(shí)現(xiàn)自動(dòng)換行？
- 在HTML中如何讓button居中，有幾種方法
- JS中怎樣刪除數(shù)組末尾元素？教你兩種方法
- vue怎樣獲取url參數(shù)?教你兩種方法
- 如何用Python計(jì)算BMI指數(shù)？一文帶你看懂
- python怎樣獲取數(shù)組元素的下標(biāo)？教你三種方法
- python中的ord函數(shù)有什么用？用法是什么？
- Python中array與list轉(zhuǎn)換如何做，方法是什么
- 在CSS中怎么實(shí)現(xiàn)一條橫線，方法是什么
- Python怎樣設(shè)計(jì)串口之間通信的程序
- phpstorm怎么使用和操作？一文帶你快速了解
- vue怎么給對(duì)象數(shù)組賦值？this.$set方法幫你解決
成為群英會(huì)員,開啟智能安全云計(jì)算之旅
立即注冊友鏈合作 群英網(wǎng)絡(luò) 智帝云 主機(jī)評(píng)測 idc公司 商城系統(tǒng) 跨境電商 主機(jī)吧 酷庫博客 OA系統(tǒng) 騰訊企業(yè)郵箱 銳成信息 sdwan
關(guān)注或聯(lián)系群英網(wǎng)絡(luò)
7x24小時(shí)售前：400-678-4567
7x24小時(shí)售后：0668-2555666
24小時(shí)QQ客服
群英微信公眾號(hào)
CNNIC域名投訴舉報(bào)處理平臺(tái)
服務(wù)電話：010-58813000
服務(wù)郵箱：[email protected]
投訴與建議：0668-2555555
Copyright ? QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版權(quán)所有
增值電信經(jīng)營許可證 : B1.B2-20140078 ICP核準(zhǔn)（ICP備案）粵ICP備09006778號(hào) 域名注冊商資質(zhì) 粵 D3.1-20240008
