微信小程序商品报价表格兼容PC端、手机端

1.固定表头、表格行高由内容撑开

2.图片自适应居中、图片预览

3.筛选条件置顶、显示所选的筛选分类

4.触底加载下一页

5.表格文字可复制

6.支持手机横屏、竖屏切换。横屏时隐藏底部 tabbar 导航栏

兼容电脑、手机端，文字是可以复制的，模拟器上可能看不出效果，但是在手机端长按文字可以选择复制、电脑端使用鼠标选中快捷键复制！

上效果图

wxml

<view class="containers"><view class="head" catchtouchmove='catchTouchMove' style="width: {{isWindows?'980px':'100%'}};"><view class="head__search" wx:if="{{filtrate_show}}"><view class="search__left"><text class="iconfont icon-sousuo"></text><input class="search__input" confirm-type="search" type="text" bindinput="bindKeyInput" bindconfirm='searchClick' placeholder="请输入内容" /><view class="search__btn" bindtap="searchClick">搜索</view></view><!-- <view class="search__right" bindtap="xingshiClick"><block wx:if="{{layout_type}}"><view>收起筛选<text class="iconfont icon-weibiaoti33"></text></view></block><block wx:else><view>展开筛选<text class="iconfont icon-xia"></text></view></block></view> --></view><view class="head__filtrate" wx:if="{{filtrate_show}}"><block wx:for="{{cate_list}}" wx:for-index="i" wx:key="i"><scroll-view scroll-x="true" class="filtrate__item"><view class="filtrate__item__row"><block wx:for="{{item.cate_two}}" wx:for-item="items" wx:key="index"><view class="filtrate__item__title {{item.index == items.id ? 'disabled':''}}" bindtap="geshitap" data-item="{{items}}" data-index="{{i}}">{{items.cate_name}}</view></block></view></scroll-view></block></view><view class="open__filtrate" catchtouchmove="catchTouchMove"><view class="open__filtrate_btn" bindtap="openFiltrate" wx:if="{{!filtrate_show}}">展开筛选<text class="iconfont icon-xia"></text></view><view class="open__filtrate_btn" bindtap="openFiltrate" wx:else>收起筛选<text class="iconfont icon-weibiaoti33"></text></view><view class="selected__type" wx:if="{{filtrateList!=''}}">所选分类：<block wx:for="{{filtrateList}}" wx:key="index"><text>{{item.cate_name}}</text></block></view></view></view><view class='centre__container'><view class='table' style="margin-top: {{filtrate_show?headHeight+'px':'30px'}};"><view class='table__thead' style="top: {{filtrate_show?headHeight+'px':'30px'}};"><view class="th" style='width:70px;'>序号</view><view class='th' style='width:150px;'>图片</view><view class='th' style='width:70px;'>型号</view><view class='th' style='width:70px;'>颜色</view><view class='th' style='width:100px;'>色号</view><view class='th' style='width:70px;'>规格</view><view class='th' style='width:150px;'>尺寸</view><view class='th' style='width:70px;'>件数</view><view class='th' style='width:70px;'>价格</view><view class='th' style='width:150px;'>备注</view></view><block wx:for="{{list}}" wx:key="index"><view class='table__tbody'><view class='td' style='width:70px;font-weight: bold;'>{{index+1}}</view><view class="td" style='width:150px;'><image src="{{item.image}}" mode="aspectFit" bindtap="imgClick" data-index="{{index}}" lazy-load style="height: 120px;margin: auto;"></image></view><view class="td" style='width:70px;'>{{item.param_model}}</view><view class="td" style='width:70px;'>{{item.param_color}}</view><view class="td" style='width:100px;'>{{item.param_color_num}}</view><view class="td max__td"><view wx:for="{{item.param_sku}}" wx:for-item="item2" wx:for-index="index2" wx:key="index2" class="max__td__row"><view class="max__td__row__item" style="width: 70px;">{{item2.sku}}</view><view class="max__td__row__item" style='width:150px;'>{{item2.size}}</view><view class="max__td__row__item" style="width: 70px;">{{item2.num}}</view><view class="max__td__row__item" style="width: 69px;font-weight: bold;">{{item2.price}}</view></view></view><view class='td' style='width:150px;'>{{item.param_custom_remark == null?"":item.param_custom_remark}}</view></view></block></view></view><view class='mask' hidden='{{!filtrate_show}}' catchtouchmove='catchTouchMove' bindtap='close'></view>
</view><block wx:if="{{isPhone}}"><phoneNumber isPhone='{{isPhone}}'></phoneNumber>
</block>
<block wx:if="{{!iShidden}}"><authorize bind:onLoadFun='onLoadFun' iShidden="{{iShidden}}" isAuto="{{isAuto}}"></authorize>
</block>

wxss 样式这里统一使用 px 因为rpx可以根据屏幕宽度进行自适应，电脑端字体会变大、表格行高也会因为窗口大而变大等等...这样就做不到兼容电脑端了，所以不用rpx，直接用px写死

page {width: 100%;height: 100%;white-space: nowrap;overflow: scroll;box-sizing: border-box;font-size: 14.5px;font-family: '宋体';
}.containers {width: 980px;height: auto;margin: 0 auto;background-color: #fff;
}.head {width: 100%;padding: 0 10px; position: fixed;top: 0;z-index: 99;background-color: #fff;overflow: hidden;
}/* search */
.head__search {/* width: 980px; */width: 100%;height: auto;padding: 10px 0px;display: flex;align-items: center;justify-content: space-between;
}.search__left {/* width: 600px; */flex: 1;height: 30px;position: relative;vertical-align: middle;border-radius: 15px;padding-left: 25px;display: flex;align-items: center;border: 1px solid #ccc;
}.search__left text {font-size: 16px;position: absolute;top: 6.5px;left: 15px;
}.search__input {padding-left: 12.5px;/* width: 500px; */flex: 1;
}.search__btn {width: 100px;height: 100%;display: flex;flex-direction: column;justify-content: center;text-align: center;border-radius: 0px 15px 15px 0px;color: #555;background-color: #eee;border-left: 1px solid #ccc;
}@media (max-width: 430px) {/* 仅在 480px 或更宽的屏幕上生效的样式规则 */.search__btn {width: 60px;}
}.search__right {display: flex;align-items: center;flex-direction: column;justify-content: center;text-align: center;width: 83px;height: 25px;border: 1px solid #e8e8e8;background-color: #f5f5f5;color: #6b6b6b;cursor: pointer;
}/* filtrate */
.head__filtrate {/* width: 100%; */height: auto;overflow: hidden;
}.filtrate__item {padding-bottom: 10px;
}.filtrate__item__row {display: flex;align-items: center;/* flex-wrap: wrap; */
}.filtrate__item__title {padding: 0 10px;height: 30px;line-height: 30px;white-space: nowrap;font-size: 13px;font-family: PingFang;font-weight: 500;color: #010000;border-radius: 15px;
}.filtrate__item__row .disabled {background-color: #F0F1F3;font-weight: 800;
}/* open__filtrate */
.open__filtrate {width: 980px;height: 30px;font-size: 12px;padding: 0 30px;display: flex;align-items: center;
}.open__filtrate_btn {width: 85px;height: 30px;display: flex;align-items: center;justify-content: center;text-align: center;background-color: #f8f8f8;border: 1px solid #f8f8f8;
}.selected__type {margin-left: 20px;
}.selected__type text{margin-right: 10px;
}/* centre */
.centre__container {width: 100%;height: 100%;display: flex;background-color: white;
}.table {margin: 0 auto;display: inline-flex;flex-direction: column;border: 1px solid rgba(218, 217, 217, 1);border-bottom: 0;
}.table__thead {width: 100%;height: 40px;border-top: 1px solid rgba(218, 217, 217, 1);border-width: thin;display: inline-flex;position: -webkit-sticky;position: sticky;top: 50px;z-index: 87;
}.th,
.td {width: 200px;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #FFFF00;border-right: 1px solid rgba(218, 217, 217, 1);border-bottom: 1px solid rgba(218, 217, 217, 1);border-width: thin;font-weight: bold;
}.table__tbody {width: 100%;display: inline-flex;flex-direction: row;border-bottom: 1px solid rgba(218, 217, 217, 1);
}.td {background: white;min-height: 90px;font-weight: normal;text-align: center;word-wrap: break-word;word-break: break-all;white-space: pre-line;/* 文字可复制 */user-select: text;-moz-user-select: text;-webkit-user-select: text;-ms-user-select: text;
}.max__td {width: 360px;
}.max__td__row {width: 100%;display: flex;border-bottom: 1px solid rgba(218, 217, 217, 1);flex-basis: auto;flex-grow: 1;-webkit-flex-grow: 1;
}.max__td__row:last-child {border-bottom: none;
}.max__td__row__item {width: 200.5px;border-right: 1px solid rgba(218, 217, 217, 1);border-width: thin;min-height: 30px;display: flex;justify-content: center;align-items: center;text-align: center;
}.max__td__row__item:last-child {border-right: none;
}.mask {width: 100%;height: 100%;position: fixed;top: 0;right: 0;left: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);z-index: 98;
}
/* ----end */

js 处理逻辑

// 导入接口
import { getIndexData, cateIndex, goodsList } from '../../api/api.js';Page({/*** 页面的初始数据*/data: {cate_list: [],list: [],inputValue: '',ids: '',page: 1,loading: true,up_show: false,layout_type: true,userInfo: "",iShidden: true,isAuto: false,isPhone: false, inter: '',headHeight:0,filtrate_show: false,isWindows: false,filtrateList:[],},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//获取系统信息wx.getSystemInfo({success: (res) => {if(res.platform == "windows") {this.setData({isWindows: true})}}})//请求筛选列表cateIndex().then(res => {if (res.status == 200) {let all = {cate_name: "全部",id: 0,}res.data.forEach((e) => {e.index = 0;e.cate_two = [all, ...e.cate_two];})this.setData({cate_list: res.data})}})//请求商品列表this.dataGoods();},//商品列表dataGoods() {let data = {cate_ids: this.data.ids,page: this.data.page,keywords: this.data.inputValue,}getIndexData(data).then(res => {if (res.status == 200) {if (res.data.length != 0) {this.setData({list: [...this.data.list, ...res.data]})} else {this.setData({loading: false})}}})},// 键盘输入时触发事件 bindKeyInput: function (e) {this.setData({inputValue: e.detail.value})},//搜索按钮点击 or 点击键盘搜索按钮时触发searchClick() {let result = this.islogin();if(result){this.setData({page: 1,list: [],loading: true})this.dataGoods();}},//收起 | 展开筛选xingshiClick() {this.setData({layout_type: !this.data.layout_type,})wx.pageScrollTo({scrollTop: 0,duration: 0})},// 点击分类筛选geshitap(e) {let result = this.islogin();if(result){let dataset = e.currentTarget.dataset;var listIndex = "cate_list[" + dataset.index + "].index";this.setData({[listIndex]: dataset.item.id,page: 1,list: [],loading: true})let ids = [];this.data.cate_list.forEach(item => {if (item.index != 0) {ids.push(item.index)}})this.setData({ids: ids.join(','),})// 处理所选的分类let newlist = []newlist.push({id:dataset.index,cate_name:dataset.item.cate_name})if(this.data.filtrateList.length==0){//console.log('--空数组,直接赋值')this.setData({filtrateList: newlist,})} else {//console.log('--非空数组,合并数组')let isRow = false;let index = 0;for(var k = 0;k<this.data.filtrateList.length;k++){if(dataset.index==this.data.filtrateList[k].id){//console.log('循环判断用户点击的是否是同一行')isRow = trueindex = k}}if(isRow){//console.log('点击的是同一行,替换')let list = this.data.filtrateListlist[index].cate_name = dataset.item.cate_namethis.setData({filtrateList: list})} else {//console.log('点击的不是同一行,合并');this.setData({filtrateList: this.data.filtrateList.concat(newlist)})    }}//console.log(this.data.filtrateList);this.dataGoods();}},//点击图片预览事件imgClick(e){let result = this.islogin();if(result){let index = e.currentTarget.dataset.index;let list = this.data.list;// wx.previewImage({//   current: list[index].image, //   urls: list[index].slider_image,//   success: function(res) {}// })//查看图片要添加记录，所以请求一次接口goodsList(list[index].id).then(res => {if (res.status == 200) {wx.previewImage({current: res.data.storeInfo.image, urls: res.data.storeInfo.slider_image,success: function(res) {}})} })}},//用户是否登录、封装为公共函数islogin() {let userInfo = wx.getStorageSync('USERINFO');if (!userInfo) {this.setData({iShidden: false,});      return false}if (!userInfo.phone) {this.setData({isPhone: true,});return false}return true},/*** * 生命周期函数--监听屏幕滚动*/onPageScroll (e) {// if(e.scrollTop > 0 ) {//   this.setData({//     filtrate_show: false,//   });// }},// 展开筛选openFiltrate () {this.setData({filtrate_show: !this.data.filtrate_show,})let query = wx.createSelectorQuery();query.select('.head').boundingClientRect(rect=>{//console.log('head的高度是',rect.height)this.setData({headHeight: rect.height})}).exec();},    //关闭蒙版close() {this.openFiltrate()},//禁止滑动catchTouchMove(){return false;},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {// wx.hideHomeButton();},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** * 生命周期函数--监听屏幕旋转事件*/onResize:function(res) {console.log('屏幕方向旋转',res.deviceOrientation)if(res.deviceOrientation == 'landscape'){wx.hideTabBar();}else{wx.showTabBar();}},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {if (this.data.loading) {let page = this.data.page + 1;this.setData({page: page})this.dataGoods();}},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

然后配置单页面的json文件注意不是app.json ！ "pageOrientation": "auto" （手机横竖屏自适应）

微信小程序商品报价表格兼容PC端、手机端相关推荐

【日常点滴015】微信小程序直接下载文件到PC端
微信小程序直接下载文件到PC端方法一 : 方法二: 下载函数内的全部代码附promise同时多张图片上传方法方法一 : 需要点击下载 =>手动给定后缀名=>保存文档给的方法,但是保 ...
今天突然发现，微信小程序手机访问正常，PC端访问小程序图片无法加载？
今天突然发现,微信小程序手机访问正常,PC端访问小程序图片无法加载? 所有图片在pc上查看都无法显示. 然后使用抓包工具抓包,pc端图片全部403,结果为 AccessDenied You are d ...
使用微信小程序扫码登录系统PC端web的功能
1.项目说明: 项目PC端(vue单页面应用,前后端分离).移动端(微信小程序)共用同一Java Springboot服务.小程序可以直接获取微信手机号登录,不需要密码,因为系统黙认密码是随机的,因此 ...
反编译微信小程序保姆级教程（PC端程序包）
本教程仅供学习,请勿用于非法途径,代码抄袭属于违法行为,尊重他人才是尊重自己我一比较啰嗦,二比较懒.前方一堆屁话,正文移步到第二段!!! 这段时间一直在研究html.css.JavaScript ...
原生javascript图片惰性延迟加载插件lazyload–兼容PC端手机端
为什么需要页面图片惰性延迟加载? 当页面内图片达到一定的数量,页面的加载速度就越来越差. 我们并不需要把所有图片一次性加载完,而且,用户也不会一次性把所有图片看完. 所以,我们需要做的就是按需加载,只 ...
微信小程序商品分享海报
canva实现微信小程序商品分享海报前言使用canvas画布实现小程序分享海报功能一.定义一个生成海报按钮 1.点击按钮生成海报 catchtap:handleShare 使用catch绑定阻止 ...
vue和小程序哪个好学一点_litemall,Spring Boot后端，微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端注意: 由于第一次加载数据量较大,建议wif ...
当微信小程序遇上TensorFlow：Server端实现补充
在前面一篇文章<当微信小程序遇上TensorFlow:Server端实现>中,我们探讨了微信小程序server端的实现.今天在调试微信小程序时才发现一个问题,那就是:微信小程序要求HTTP ...
最新WordPress微信小程序社区论坛源码多端应用
WordPress多端应用 WordPress作为后端生成多端小程序.快应用及APP,可用于资讯.新闻.博客.企业官网等后端使用开源博客建站系统wordpress和微慕小程序开源版插件前端使用u ...

微信小程序商品报价表格兼容PC端、手机端

微信小程序商品报价表格兼容PC端、手机端相关推荐

最新文章

热门文章

微信小程序 商品报价表格 兼容PC端、手机端

微信小程序 商品报价表格 兼容PC端、手机端相关推荐

最新文章

热门文章

微信小程序商品报价表格兼容PC端、手机端

微信小程序商品报价表格兼容PC端、手机端相关推荐