• 售前

  • 售后

热门帖子
入门百科

小步调实现滑动块结果

[复制链接]
张玉萍Pilar 显示全部楼层 发表于 2021-10-26 14:02:22 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了小程序实现滑动块效果的具体代码,供大家参考,具体内容如下
当你在复制的时间 肯定要 把js 逻辑的 list 数据更改就行了
小程序的css样式
  1. .box {
  2.     width: 100vw;
  3.     background: #F2F2F2;
  4.     transition: all 3s;
  5. }
  6. .box-b {
  7.     height: 8vh;
  8.     width: 100%;
  9.     display: flex;
  10.     justify-content: space-between;
  11.     background-color: #FAFAFA;
  12.     align-items: center;
  13.     padding: 0 30rpx;
  14.     box-sizing: border-box;
  15. }
  16. .box-r1 {
  17.     font-size: 24rpx;
  18.     color: red;
  19. }
  20. .box-r2 {
  21.     font-size: 28rpx;
  22.     padding: 20rpx 50rpx;
  23.     border-radius: 50rpx;
  24.     color: #fff;
  25.     background-color: #FF6C3B;
  26. }
  27. .box-t {
  28.     height: 92vh;
  29.     overflow-y: auto;
  30.     overflow-x: hidden;
  31.     padding: 0 25rpx;
  32. }
  33. .box-top {
  34.     width: 90vw;
  35.     height: 22vw;
  36.     margin-top: 20rpx;
  37.     display: flex;
  38.     flex-direction: column;
  39.     justify-content: space-around;
  40. }
  41. .boxs {
  42.     width: 105vw;
  43.     height: 20vw;
  44.     margin-top: 20rpx;
  45.     display: flex;
  46.     flex-direction: row;
  47.     justify-content: space-around;
  48. }
  49. .boxs-1 {
  50.     width: 100vw;
  51.     height: 20vw;
  52.     background: white;
  53.     display: flex;
  54.     flex-direction: row;
  55.     justify-content: space-around;
  56.     padding: 10rpx 0;
  57.     border-radius: 10px;
  58.     margin-left: 20px;
  59. }
  60. .boxs-1 > view:first-child {
  61.     width: 10vw;
  62.     line-height: 18vw;
  63.     text-align: center;
  64.     /* background: #ccc; */
  65.     height: 20vw;
  66. }
  67. .boxs-1 > view:nth-child(2) {
  68.     width: 20vw;
  69.     /* background: #ccc; */
  70.     height: 100%;
  71.     border-radius: 20rpx;
  72. }
  73. image {
  74.     width: 100%;
  75.     height: 100%;
  76.     border-radius: 20rpx;
  77. }
  78. .boxs-1 > view:last-child {
  79.     width: 60vw;
  80.     /* background: #ccc; */
  81.     height: 100%;
  82.     display: flex;
  83.     flex-direction: column;
  84.     justify-content: space-around;
  85. }
  86. .boxs-1 > view:last-child>view{
  87.     display: flex;
  88.     flex-direction: row;
  89.     justify-content: space-around;
  90.     position: relative;
  91.     left: 30rpx;
  92. }
  93. text {
  94.     width: 60vw;
  95.     overflow: hidden;
  96.     text-overflow: ellipsis;
  97.     white-space: nowrap;
  98. }
  99. .boxs-2 {
  100.     width: 120rpx;
  101.     height: 170rpx;
  102.     text-align: center;
  103.     line-height: 170rpx;
  104.     background: #e64340;
  105.     font-size: 24rpx;
  106.     color: #fff;
  107.     border-top-right-radius: 10px;
  108.     border-bottom-right-radius: 10px;
  109. }
  110. .red_cart{
  111.     color: red;
  112.     position: relative;
  113.     right: 40px;
  114. }
复制代码
小程序的wxml样式
  1. <view class="box">
  2.     <view class="box-t">
  3.         <movable-area class="box-top" wx:for="{{list}}" wx:key="index">
  4.             <movable-view class="boxs"
  5.                           direction="horizontal"
  6.                           animation="{{true}}"
  7.                           inertia="true"
  8.                           out-of-bounds="false"
  9.             >
  10.                 <view class="boxs-1">
  11.                     <view>
  12.                         <checkbox checked="{{selected}}" wx:key="index" bindtap="chec" data-selected="{{item}}"></checkbox>
  13.                     </view>
  14.                     <view>
  15.                         <image src="{{item.pic}}"></image>
  16.                     </view>
  17.                     <view class="cart_list">
  18.                         <text>{{item.name}}</text>
  19.                         <view>
  20.                             <view class="red_cart">¥{{item.price}}</view>
  21.                             <view>
  22.                                 <van-stepper class="cart_vant"
  23.                                         value="{{ item.number }}"
  24.                                         bind:change="onChange" data-key="{{item.key}}"/>
  25.                             </view>
  26.                         </view>
  27.                     </view>
  28.                 </view>
  29.                 <view class="boxs-2" bindtap="del" data-key="{{item.key}}">删除</view>
  30.             </movable-view>
  31.         </movable-area>
  32.     </view>
  33.     <view class="box-b">
  34.         <view class="box-r1">合计:¥{{price}}</view>
  35.         <view class="box-r2">去结算</view>
  36.     </view>
  37. </view>
复制代码
小程序js
  1. // pages/sales/sales.js
  2. let {
  3.     getShop,
  4.     getRemove,
  5.     modifyNumber,
  6.     getSelected
  7. } = require('../../http/api')
  8. Page({
  9.     onShareAppMessage() {
  10.         return {
  11.             title: 'movable-view',
  12.             path: 'page/component/pages/movable-view/movable-view'
  13.         }
  14.     },
  15.     data: {
  16.         x: 0,
  17.         scale: 2,
  18.         list: [],//可以现在 list定义数据 测试使用
  19.         price: 0,
  20.         selected: []
  21.     },
  22.     del(e) {
  23.         console.log(e.currentTarget.dataset.key)
  24.         var keys = e.currentTarget.dataset.key
  25.         var token = wx.getStorageSync('token')
  26.         getRemove(token, keys).then(res => {
  27.             // console.log(res)
  28.         })
  29.         this.getShop()
  30.     },
  31.     onChange(e) {
  32.         console.log(e.currentTarget.dataset.key)
  33.         console.log(e.detail)
  34.         var token = wx.getStorageSync('token')
  35.         var key = e.currentTarget.dataset.key
  36.         var number = e.detail
  37.         modifyNumber(token, key, number).then(res => {
  38.             // console.log(res)
  39.         })
  40.         this.getShop()
  41.     },
  42.     tap() {
  43.         this.setData({
  44.             x: 0,
  45.         })
  46.     },
  47.     getShop() {
  48.         getShop().then(res => {
  49.             this.setData({
  50.                 list: res.items
  51.             })
  52.         })
  53.     },
  54.     chec(e) {
  55.         this.getShop()
  56.     },
  57.     onLoad: function (options) {
  58.         getShop().then(res => {
  59.             this.setData({
  60.                 list: res.items
  61.             })
  62.             this.data.list.forEach(i => {
  63.                 var token = wx.getStorageSync('token')
  64.                 var key = i.key
  65.                 var selected = i.selected
  66.                 this.setData({
  67.                     selected: selected
  68.                 })
  69.                 getSelected(token, key, selected).then(res => {
  70.                     this.setData({
  71.                         price: res.data.price
  72.                     })
  73.                 })
  74.             })
  75.         })
  76.     },
  77.     onShow: function () {
  78.         this.getShop()
  79.         if (wx.getStorageSync('token')) {
  80.             wx.hideLoading()
  81.         } else {
  82.             wx.showLoading({
  83.                 title: '请登录',
  84.             })
  85.         }
  86.     },
  87.     /**
  88.      * 生命周期函数--监听页面隐藏
  89.      */
  90.     onHide: function () {
  91.     },
  92.     /**
  93.      * 生命周期函数--监听页面卸载
  94.      */
  95.     onUnload: function () {
  96.     },
  97.     onReady: function () {
  98.     },
  99.     /**
  100.      * 页面相关事件处理函数--监听用户下拉动作
  101.      */
  102.     onPullDownRefresh: function () {
  103.     },
  104.     /**
  105.      * 页面上拉触底事件的处理函数
  106.      */
  107.     onReachBottom: function () {
  108.     },
  109.     /**
  110.      * 用户点击右上角分享
  111.      */
  112. })
复制代码
以上就是本文的全部内容,盼望对大家的学习有所资助,也盼望大家多多支持草根技术分享。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作