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