参考链接：
（1）
https://www.jianshu.com/p/a8b6b628941e
（1）效果图
遇到一个需求，就是需要在一个页面进行多家商店的价格比价，所以就需要表格有左右滚动的效果，最终的效果如下图所示。
（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() {
},
})