美文网首页微信小程序工作生活
小程序模拟表格-可左右滑动

小程序模拟表格-可左右滑动

作者: _果不其然_ | 来源:发表于2019-07-01 15:36 被阅读0次
遇到一个需求，就是需要在一个页面进行多家商店的价格比价，所以就需要表格有左右滚动的效果，最终的效果如下图所示
滑动表格~1.gif

  • 首先说一下数据，因为左侧是一个单独的列表，原本是从接口拿的数据，接口右侧返回的数据是按照左侧的列表数量对应返回的，所以内容方面大家可以根据自己的需要添加。


    image.png
  • 然后再说一下这个页面的布局，虽然是一个表格，但是我是划分成两部分，左侧是固定的，左侧的最上面我放了一个空的view来占位，右侧是可滑动的，因为要求边框和每个view绝对的对齐，所以样式方面需要格外注意，右侧的数据列表如果缺少部分数据，是会影响整体样式的。

直接放代码

  • 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() {

  },

})

相关文章

  • 小程序模拟表格-可左右滑动

    遇到一个需求，就是需要在一个页面进行多家商店的价格比价，所以就需要表格有左右滚动的效果，最终的效果如下图所示 首先...

  • 小程序swiper组件用箭头控制无法衔接

    问题描述 小程序组件swiper左右滑动，自动轮播时circular衔接效果都是没有问题的，但当我们用左右箭头模拟...

  • 小程序左右滑动

    左右滑动还是我们写小程序页面时经常遇到的一个布局，所以今天就摘出来写一个小demo，后面遇到就不用再想了，主要是比...

  • 微信小程序——左右滑动切换页面

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件，主要有三个事件：touchstart，touch...

  • 小程序的选项卡结合左右滑动

    这个是uni小程序的选项卡结合左右滑动

  • react 合成事件

    1. 场景 父组件是个左右可滑动的组件，子组件是可左右滑动的图片展示。功能是手指左右滑动时可页面切换，但是在滑动图...

  • 2019-11-11

    防止小程序左右超出，导致左右滑动的问题： 防止小程序弹出层中，背景滚动的问题： 在元素中添加这个: 具体看以下链接...

  • react-native  自己写的一个table组件

    能左右滑动，但是表格的宽度不能动态 稍等整理下上代码 /** libin 自定义表格*/

  • 小程序组件 scroll-view

    小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分，在这次项目中刚好需要用到横向滑动，但在...

  • 小程序---实现页面左右tab滑动

    定义页面元素 重要页面数据 计算windowWidth、windowHeight 网络请求，动态计算页面高度，然后...

网友评论

    本文标题：小程序模拟表格-可左右滑动

    本文链接：https://www.haomeiwen.com/subject/xwugcctx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    微信小程序

    工作生活

    关于我们|服务条款|联系我们|小程序模拟表格-可左右滑动|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！