php上下左右都可滑动的表格,小程序模拟表格-可左右滑动

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

滑动表格~1.gif

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

image.png

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

直接放代码

WXML

{{item.typeName}}

{{item.name}}

¥{{cell.price}}/斤

缺货

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

},

})