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

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

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

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

4.触底加载下一页

5.表格文字可复制

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

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

上效果图

wxml

  
    
      
        
        
        搜索
      
      
    
    
      
        
          
            
              
                {{items.cate_name}}
              
            
          
        
      
    
    
      展开筛选
      收起筛选
      所选分类：
        {{item.cate_name}}
      
    
  
  
    
      
        序号
        图片
        型号
        颜色
        色号
        规格
        尺寸
        件数
        价格
        备注
      
      
        
          {{index+1}}
          
            
          
          {{item.param_model}}
          {{item.param_color}}
          {{item.param_color_num}}
          
            
              {{item2.sku}}
              {{item2.size}}
              {{item2.num}}
              {{item2.price}}
            
          
          {{item.param_custom_remark == null?"":item.param_custom_remark}}
        
      
    
  
  



  


  

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 {
        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" （手机横竖屏自适应）