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

遇到一个需求,就是需要在一个页面进行多家商店的价格比价,所以就需要表格有左右滚动的效果,最终的效果如下图所示
滑动表格~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() {

  },

})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,544评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,430评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,764评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,193评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,216评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,182评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,063评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,917评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,329评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,425评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,019评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2 353

推荐阅读更多精彩内容