微信小程序 实现左右滑动的模拟表格

最新推荐文章于 2024-03-15 16:32:45 发布
最新推荐文章于 2024-03-15 16:32:45 发布
阅读量1.7k 收藏 9
点赞数
分类专栏： 前端（微信小程序、Web开发等）
原文链接：https://www.jianshu.com/p/a8b6b628941e
版权

参考链接：
（1）小程序模拟表格-可左右滑动
https://www.jianshu.com/p/a8b6b628941e

一、例子1

（1）效果图
遇到一个需求，就是需要在一个页面进行多家商店的价格比价，所以就需要表格有左右滚动的效果，最终的效果如下图所示。
在这里插入图片描述
（2）解析、需求分析
首先说一下数据，因为左侧是一个单独的列表，原本是从接口拿的数据，接口右侧返回的数据是按照左侧的列表数量对应返回的，所以内容方面大家可以根据自己的需要添加。
在这里插入图片描述
然后再说一下这个页面的布局，虽然是一个表格，但是我是划分成两部分，左侧是固定的，左侧的最上面我放了一个空的view来占位，右侧是可滑动的，因为要求边框和每个view绝对的对齐，所以样式方面需要格外注意，右侧的数据列表如果缺少部分数据，是会影响整体样式的。

（3）
wxml文件

<view class='table-module'>
  <!-- 左侧固定 -->
  <view class='left-policy-type'>
    <view class='empty-box'></view>
    <view wx:for="{{fruitTypeList}}" class='left-col-list' wx:key="{{index}}">
      <view style="font-size:28rpx;  color: rebeccapurple;font-weight:bolder">{{item.typeName}}</view>
    </view>
  </view>
  <!-- 右侧表格滚动 -->
  <scroll-view class="scroll-box" scroll-x="true">
    <view class="scroll-view-item" wx:for="{{fruitList}}" wx:for-index="bigindex" wx:key="{{index}}">
      <view class='company-name'>{{item.name}}</view>
      <view wx:for="{{item.list}}" wx:for-item="cell" data-bigindex="{{bigindex}}" data-index='{{index}}' class='price-box' wx:key="{{index2}}">
        <view class="price" wx:if="{{cell.price != '缺货'}}">¥{{cell.price}}/斤</view>
        <view class="price" style="color:#FF6347" wx:elif="{{cell.price == '缺货'}}">缺货</view>
      </view>
    </view>
  </scroll-view>
</view>

wxss文件

page {
  background: #f3f3f3;
}
.table-module {
  display: flex;
  margin-top: 2vh;
  background: white;
}
.left-policy-type {
  width: 25vw;
  height: auto;
}
.empty-box {
  width: 25vw;
  height: 8.2vh;
  border-right: 1rpx solid #e5e5e5;
  border-bottom: 1rpx solid #e5e5e5;
}

.left-col-list {
  width: 25vw;
  height: 8.2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1rpx solid #e5e5e5;
  border-bottom: 1rpx solid #e5e5e5;
}
.scroll-box {
  height: auto;
  white-space: nowrap; /*它会防止元素中的文本换行，除非使用了一个br元素。*/
  display: flex;
  width: 75vw;
}
.limit-scroll{
  height: auto;
}
.top-scroll-box{
  width: 100vw;
  height: auto;
  /* height: 16.9vh; */
}
.top-scroll-add{
  width: 100vw;
 height: 16.9vh;
}
.scroll-view-item {
  width: 25vw;
  display: inline-block;
}
.company-name {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  width: 24.96vw;
  height: 8.2vh;
  font-weight: bolder;
  /* background: lavender; */
  /* border-top: 1rpx solid     #696969;
  border-right: 1rpx solid  #696969;
 border-bottom: 1rpx solid  #696969; */
   color: rebeccapurple;
  border-right: 1rpx solid #e5e5e5; 
   border-bottom: 1rpx solid #e5e5e5;
}

.price-box {
  height: 8.2vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  border-right: 1rpx solid #e5e5e5;
  border-bottom: 1rpx solid #e5e5e5;
}
.price {
  width: 100%;
  height: 8.2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color:    #7c2929;
  font-size: 28rpx;
  border-right: 1rpx solid #e5e5e5;
  border-bottom: 1rpx solid #e5e5e5;
  letter-spacing: 1rpx;
}

js文件

Page({
  data: {
    fruitTypeList: [{
        "fruitTypeId": 1,
        "typeName": "苹果"
      },
      {
        "fruitTypeId": 2,
        "typeName": "香蕉"
      },
      {
        "fruitTypeId": 3,
        "typeName": "橙子"
      },
      {
        "fruitTypeId": 4,
        "typeName": "山竹"
      },
      {
        "fruitTypeId": 5,
        "typeName": "荔枝"
      }, {
        "fruitTypeId": 6,
        "typeName": "芒果"
      },
      {
        "fruitTypeId": 7,
        "typeName": "西瓜"
      },
      {
        "fruitTypeId": 8,
        "typeName": "草莓"
      },
      {
        "fruitTypeId": 9,
        "typeName": "水蜜桃"
      },
      {
        "fruitTypeId": 10,
        "typeName": "李子"
      },
      {
        "fruitTypeId": 11,
        "typeName": "榴莲"
      },
      {
        "fruitTypeId": 12,
        "typeName": "蓝莓"
      },
      {
        "fruitTypeId": 13,
        "typeName": "柚子"
      },
      {
        "fruitTypeId": 14,
        "typeName": "木瓜"
      },
      
    ],
    fruitList: [{
        "name": "果唯伊水果",
        "list": [
          {
            "pkId": 1,
            "price": "5.8",
            "typeName": "苹果"
          },
          {
            "pkId": 2,
            "price": "2.08",
            "typeName": "香蕉"
          },
          {
            "pkId": 3,
            "price": "6.00",
            "typeName": "橙子"
          },
          {
            "pkId": 4,
            "price": "8.40",
            "typeName": "山竹"
          },
          {
            "pkId": 5,
            "price": "15",
            "typeName": "荔枝"
          },
          {
            "pkId": 6,
            "price": "5.8",
            "typeName": "芒果"
          },
          {
            "pkId": 7,
            "price": "2.10",
            "typeName": "西瓜"
          },
          {
            "pkId": 8,
            "price": "6.00",
            "typeName": "草莓"
          },
          {
            "pkId": 9,
            "price": "8.00",
            "typeName": "水蜜桃"
          },
          {
            "pkId": 10,
            "price": "7.80",
            "typeName": "李子"
          },
          {
            "pkId": 11,
            "price": "缺货",
            "typeName": "榴莲"
          },
          {
            "pkId": 12,
            "price": "4.08",
            "typeName": "蓝莓"
          },
          {
            "pkId": 13,
            "price": "2.80",
            "typeName": "柚子"
          },
          {
            "pkId": 14,
            "price": "8.00",
            "typeName": "木瓜"
          },
        ]
      },
      {
        "name": "恋果",
        "list": [{
            "pkId": 1,
            "price": "5.40",
            "typeName": "苹果"
          },
          {
            "pkId": 2,
            "price": "2.20",
            "typeName": "香蕉"
          },
          {
            "pkId": 3,
            "price": "缺货",
            "typeName": "橙子"
          },
          {
            "pkId": 4,
            "price": "9.00",
            "typeName": "山竹"
          },
          {
            "pkId": 5,
            "price": "14.00",
            "typeName": "荔枝"
          },
          {
            "pkId": 6,
            "price": "5.50",
            "typeName": "芒果"
          },
          {
            "pkId": 7,
            "price": "1.89",
            "typeName": "西瓜"
          },
          {
            "pkId": 8,
            "price": "6.35",
            "typeName": "草莓"
          },
          {
            "pkId": 9,
            "price": "8.20",
            "typeName": "水蜜桃"
          },
          {
            "pkId": 10,
            "price": "8.60",
            "typeName": "李子"
          },
          {
            "pkId": 11,
            "price": "24.60",
            "typeName": "榴莲"
          },
          {
            "pkId": 12,
            "price": "4.56",
            "typeName": "蓝莓"
          },
          {
            "pkId": 13,
            "price": "3.60",
            "typeName": "柚子"
          },
          {
            "pkId": 14,
            "price": "7.20",
            "typeName": "木瓜"
          },

        ],

      },
      {
        "name": "百果园",
        "list": [{
            "pkId": 1,
            "price": "6.10",
            "typeName": "苹果"
          },
          {
            "pkId": 2,
            "price": "2.30",
            "typeName": "香蕉"
          },

          {
            "pkId": 3,
            "price": "缺货",
            "typeName": "橙子"
          },
          {
            "pkId": 4,
            "price": "9.00",
            "typeName": "山竹"
          },
          {
            "pkId": 5,
            "price": "14.30",
            "typeName": "荔枝"
          },
          {
            "pkId": 6,
            "price": "5.65",
            "typeName": "芒果"
          },
          {
            "pkId": 7,
            "price": "2.08",
            "typeName": "西瓜"
          },
          {
            "pkId": 8,
            "price": "6.60",
            "typeName": "草莓"
          },
          {
            "pkId": 9,
            "price": "7.80",
            "typeName": "水蜜桃"
          },
          {
            "pkId": 10,
            "price": "8.2",
            "typeName": "李子"
          },
          {
            "pkId": 11,
            "price": "23.8",
            "typeName": "榴莲"
          },
          {
            "pkId": 12,
            "price": "4.36",
            "typeName": "蓝莓"
          },
          {
            "pkId": 13,
            "price": "3.20",
            "typeName": "柚子"
          },
          {
            "pkId": 14,
            "price": "8.00",
            "typeName": "木瓜"
          },
        ]
      },
      {
        "name": "鲜丰水果",
        "list": [{
            "pkId": 1,
            "price": "4.80",
            "typeName": "苹果"
          },
          {
            "pkId": 2,
            "price": "1.98",
            "typeName": "香蕉"
          },

          {
            "pkId": 3,
            "price": "5.20",
            "typeName": "橙子"
          },
          {
            "pkId": 4,
            "price": "8.25",
            "typeName": "山竹"
          },
          {
            "pkId": 5,
            "price": "缺货",
            "typeName": "荔枝"
          },
          {
            "pkId": 6,
            "price": "5.8",
            "typeName": "芒果"
          },
          {
            "pkId": 7,
            "price": "2.28",
            "typeName": "西瓜"
          },
          {
            "pkId": 8,
            "price": "6.40",
            "typeName": "草莓"
          },
          {
            "pkId": 9,
            "price": "8.60",
            "typeName": "水蜜桃"
          },
          {
            "pkId": 10,
            "price": "15",
            "typeName": "李子"
          },
          {
            "pkId": 11,
            "price": "29.6",
            "typeName": "榴莲"
          },
          {
            "pkId": 12,
            "price": "缺货",
            "typeName": "蓝莓"
          },
          {
            "pkId": 13,
            "price": "4.10",
            "typeName": "柚子"
          },
          {
            "pkId": 14,
            "price": "6.80",
            "typeName": "木瓜"
          },
        ]
      }
    ],
  },
  onLoad: function() {
  },
})
Jxufe渣渣斯
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序卡片左右滑动（有动画）
01-11
基本逻辑：左滑不通过，右滑通过。。。
微信小程序原生实现table组件, 第二弹，支持横向和纵向滚动（固定列，可设置边框）
badoldboy的博客
02-05 653
在这里插入图片描述](https://img-blog.csdnimg.cn/direct/5e6cb1a645584c9dbf27b6bd1ab9465e.png。
微信小程序实现一个简单的表格
祈澈菇凉
07-12 7553
wxml&lt;view class="table"&gt; &lt;view class="tr bg-w"&gt; &lt;view class="th"&gt;SPB&lt;/view&gt; &lt;view class="th"&gt;DPB&lt;/view&gt; &lt;view c
微信小程序表格组件(锁头、锁列、样式、字体颜色等)
小风才子的博客
03-15 1551
实现微信小程序的锁头所列表格，并加入样式特性
如何通过JS去控制小程序的【频繁】视图更新？ -- table表头和列固定 -- wxs响应事件
pig_is_duck的博客
12-11 885
如何通过JS去 频繁 的控制微信小程序的视频样式，可以使用wxs响应事件
小程序自制自带滑动条的表格组件
MrJovia的博客
10-22 1607
小程序自制自带滑动条的表格组件在编写过程中遇到的难点1. 表格的编写2. 表格内容宽度固定 长度自适应3. 滚动条逻辑及代码编写4. 滚动条的卡段优化5. 小程序组件的编写及应用 先上最终效果图，表格可以上下、左右滑动，表格内容宽度固定，高度自适应内容大小，附上滑动条，滑动条长度宽度也是自适应表格的。 在编写过程中遇到的难点 表格的编写，小程序无table标签，需要自己用view+flex布局编写。 表格内容宽度固定，长度自适应。 滚动条逻辑及代码编写。 滚动条的卡段优化。 小程序组件的编写及应用。
微信小程序开发之——制作表格
热门推荐
我的博客
11-11 1万+
一 概述 表格样式一 表格样式二 二 绘制过程 外层设置display:table，并设置border-collapse表格边框模型 表头设置display:table-row，单元格设置为display:table-cell 每一行单元格同表头设置 三 示例代码 3.1 table.wxml(布局文件) <view class="su-table-box"> <view class="su-table"> <!-- 表格标题 --&g
微信小程序----实现横向滑动列表
dzqloveyou的博客
12-02 1909
微信小程序----横向滚动 在项目中用了几次，觉得有用，希望对大家也有帮助。直接看代码吧： 一、xml代码 <template> <view class="index_tab"> <scroll-view class="bottom_scroll" scroll-x="true" scroll-left="{{x}}" scroll-with-animation="{{true}}" > &l
微信小程序 界面禁止下拉 左右滑动_微信小程序实现卡片左右滑动效果
weixin_39542608的博客
11-20 680
前言 快放假了，人狠话不多，啥也不说了。先看效果图。 思路 从上面的效果图来看，基本的需求包括：左右滑动到一定的距离，就向相应的方向移动一个卡片的位置。卡片滑动的时候有一定的加速度。如果滑动距离太小，则依旧停留在当前卡片，而且有一个回弹的效果。 看到这样的需求，不熟悉小程序的同学，可能感觉有点麻烦。首先需要计算卡片的位置，然后再设置滚动条的位置，使其滚动到指定的位置，而且在滚动的过程中，加上一点加...
微信小程序组件---grid实现行和列同时滑动
u010465417的博客
07-01 1598
在微信小程序里，要实现数据列表可以随意滑动的效果： 当首行左右滑动时，数据区域同步左右滑动； 当首列上下滑动时，数据区域同步上下滑动； 当数据区域左右滑动时，首行与之同步滑动； 当数据区域上下滑动时，首列与之同步滑动； 当数据区域斜角滑动时，列和行同步滑动。 如何使用该组件呢？ 1、在你的界面文件对应的 json 文件中引入该组件 2、在 wxml 文件里使用该组件 3、在对应的 js 文件里为该...
微信小程序使用table及左滑操作
青峦。的博客
11-29 820
微信小程序使用table及左滑操作 wxml <view class="table"> <view class="tr"> <view class="th th1">序号</view> <view class="th th2">类型</view> <!-- <view class="th th3" wx:if="{{roleid == 1 || roleid == 2}}">
微信小程序之表单组件之slider(滑动选择器)+form(表单)+label(表单组件)详解
听海的博客
10-09 5887
一.slider   slider 即 滑动选择器。   1.属性     2.代码   2.1.WXSS代码 .intro { margin: 10px; }   2.2.WXML代码 &lt;text class="intro"&gt;{{textValue}}&lt;/text&gt; &lt;view class="intro"&gt; &lt...
微信小程序实现手势滑动卡片效果
11-30
最近工作中有项目要使用微信小程序技术进行开发，其中一项功能困扰了我很久，卡片滑动动效以及手势识别。经过一番研究和参考，现在把成果展示。记录自己踩到的坑，如果大家有需要，也可以帮助到大家。 效果图： ...
微信小程序左右滑动的实现代码
08-28
主要介绍了微信小程序左右滑动的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
微信小程序实现手势滑动效果
12-29
本文实例为大家分享了微信小程序实现手势滑动的具体代码，供大家参考，具体内容如下 wxml: bindtouchmove touchMove bindtouchend=touchEnd> index.js: var touchStartX = 0;//触摸时的原点 var touchStartY = 0...
微信小程序图片横向左右滑动案例
08-30
主要为大家详细介绍了微信小程序图片横向左右滑动的案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于matlab实现实现了基于项目的协同过滤代码，MATLAB实现.rar
05-04
基于matlab实现实现了基于项目的协同过滤代码，MATLAB实现.rar
各地区年末城镇登记失业人员及失业率.xls
最新发布
05-05
数据来源：中国劳动统计NJ-2023版
企业固定资产信息管理系统设计与实现.doc
05-04
企业固定资产信息管理系统设计与实现.doc
微信小程序开发左右滑动
08-11
要实现微信小程序的左右滑动功能，你可以使用swiper组件。下面是一个示例代码，演示了如何在小程序中实现左右滑动的效果： ```xml <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imageUrls}}"> <swiper-item> <image src="{{item}}" mode="aspectFill"></image> </swiper-item> </block> </swiper> ``` 在上述示例中，我们使用了swiper组件来创建一个可左右滑动的轮播图。其中，`indicator-dots`属性用于显示指示点，`autoplay`属性用于自动播放，`interval`属性表示自动切换的时间间隔，`duration`属性表示切换动画的时长。 通过在`wx:for`中绑定一个数组，我们可以循环渲染多个swiper-item，每个swiper-item都包含一个image组件用于显示图片。你可以根据实际需求修改示例代码，并将`imageUrls`数组替换为你的图片链接数组。 这样，你就可以在小程序中实现左右滑动的效果了。希望对你有帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值