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

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

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

然后再说一下这个页面的布局，虽然是一个表格，但是我是划分成两部分，左侧是固定的，左侧的最上面我放了一个空的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;
}

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

小程序模拟表格-可左右滑动相关推荐

微信小程序 table表格 PC版本
公司项目啊....其实小程序页面的商品列表也有宫格.列表.大图模式了,尽管描述得不那么详细,但是信息量也能看到个大概,但是领导或业务员比较喜欢看表格详细点,罗列得比较清晰. 所以要求可以通过小程序分享 ...
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...
小程序微信统计表格_微信小程序制作表格的方法
本文实例为大家分享了微信小程序制作表格的具体代码. 微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现, 下面是我做的表格图片: 方法如下: 在XXX.wxml中填写下面的代码参数内容 ...
JAVA关于集合类小程序--模拟新浪用户注册
JAVA关于集合类小程序–模拟新浪用户注册任务介绍: 编写一个模拟新浪微博用户注册的小程序,要求使用HashSet集合来实现.用户需要输入的有:用户名,密码.确认密码.生日(格式为:yyyy-mm- ...
html仿今日头条下拉刷新,小程序仿今日头条带滑动切换的文章列表
小程序仿今日头条带滑动切换的文章列表发布时间:2018-07-19 09:41, 浏览次数:353 拿别人仿今日头条的代码做的改版, 首先感谢前辈.其次,这个代码虽然能用,但是js里还是存在一些 ...
微信小程序模拟车牌号键盘
微信小程序模拟车牌号键盘效果图中文键盘英文数字键盘项目地址:https://github.com/ushars/keyboard
设置钉钉小程序里面表格的宽度
背景在小程序里面显示列表问题要求列表里面每一列宽度不一样,最好按比例分配解决办法 1.尝试使用表格标签,结果小程序显示不支持,好像小程序没有表格类的标签. 2.使用wxparse解析富文本, ...
微信小程序模拟拨打电话
微信小程序模拟拨打电话使用单击事件 gophone: function () {wx.makePhoneCall({phoneNumber: '4000111212',/*模拟的电话号码*/})},

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

小程序模拟表格-可左右滑动相关推荐

最新文章

热门文章