微信小程序输入联想、表格

最近看到微信小程序并没有自带table，于是准备自己写一个

（难道官方使考虑到小程序中没有使用表格的场景么。。。感觉有可能。。。）

先放效果图（顺便讽刺一波先放代码再放效果，甚至不放效果图的文章（手动狗头））

如果觉得需要的话，就继续向下吧。。。

如果有大佬觉得写的不好或者有更好的想法，欢迎指正

微信代码片段链接：https://developers.weixin.qq.com/s/eF6BSPmW7JtHhttps://developers.weixin.qq.com/s/eF6BSPmW7JtH完全使用微信官方的配色和样式的，没有使用第三方的组件。

输入字联想：是直接使用的数组的遍历实现的，并进行双向数据绑定，以在输入框下实现备选项

表格部分：主要使用的scroll-view，防止单元格内容过长，并能进行左右滚动。另外将表头做成了单独的scroll-view，以实现表头固定的效果。之后通过滚动监听，在js中将tableTitle和tableBody的滚动同步。

index.js

const app = getApp()
// 数据字典，即用来进行联想的备选数据
const dataDict = ["apple", "apple1", "apple2", "apple3", "apple4", "apple5", "apple6", "apple", "applasdasdadadadadsfsdfsdfe1", "apple2", "apple3", "apple4", "apple5", "apple6","banana", "asdfghjkl"
]
// 联想数量
const lenovoNum = 10
Page({data: {lenovoRes: [],inputValue: "",tableTitles: ["title1", "title2", "title3", "title4", "title5", "title6", "title7",],tableDetails: [["value1", "value2value2value2value2value2", "value3", "value4", "value5", "value6", "value7"],["value1", "value2", "value3", "value4", "value5", "value6", "value7"],["value1", "value2", "value3", "value4", "value5", "value6", "value7"],["value1", "value2", "value3", "value4", "value5", "value6", "value7"],["value1", "value2", "value3", "value4", "value5", "value6", "value7"],["value1", "value2", "value3", "value4", "value5", "value6", "value7"],["value1", "value2", "value3", "value4", "value5", "value6", "value7"],["value1", "value2", "value3", "value4", "value5", "value6", "value7"],["value1", "value2", "value3", "value4", "value5", "value6", "value7"],["value1", "value2", "value3", "value4", "value5", "value6", "value7"],["value1", "value2", "value3", "value4", "value5", "value6", "value7"],["value1", "value2", "value3", "value4", "value5", "value6", "value7"]],tableNameCN: "表格名称",tableTitleL: 0,tableBodyL: 0},// 联想方法（手动狗头）lenovo: function (event) {const str = event.detail;const tmpStr = (str.value + "").toLowerCase();const res = dataDict.filter((item, index, arr) => {return item.includes(tmpStr);});//res.splice(lenovoNum);this.setData({lenovoRes: res})},// 联想结果的点击事件处理setName: function (event) {this.setData({inputValue: event.currentTarget.dataset.id,lenovoRes: []})},// 以下两个方法使列表移动同步// 表头区域移动监听tableTitleOnMoveHandler: function (event) {this.setData({tableTitleL: event.detail.scrollLeft,tableBodyL: event.detail.scrollLeft})},// 表数据区域移动监听tableBodyOnMoveHandler: function (event) {this.setData({tableTitleL: event.detail.scrollLeft,tableBodyL: event.detail.scrollLeft})},
})

index.wxml

<!--index.wxml-->
<view><view id="input-container"><view style="margin-bottom:50px"><view class="flex-to-row-container"><input class="input-area-with-line" placeholder-class="place-holder" placeholder="某些提示语" bindinput="lenovo" value="{{inputValue}}" maxlength="-1"/><!--这个按钮啥用都没有，没绑定监听--><button class="mini-btn" type="primary" size="mini">没用</button></view><!--只有在联想框有值时才出现--><view class="flex-to-row-container" wx:if="{{lenovoRes.length != 0}}"><view class="flex-to-row-container lenovo-container"><view class="flex-to-col-container" style="margin:0 10px 0 10px;"><view>备</view><view>选</view><view>项</view></view><!--绿色竖线--><view style="width:3px;background-color:#91D300;"></view><scroll-view scroll-y="true" style="height: 300rpx;width:80%"><view class="lenovo-item" wx:for="{{lenovoRes}}" wx:for-item="item" wx:for-index="idx" wx:key="idx" bindtap="setName" data-id="{{item}}">{{item}}</view></scroll-view></view><!--占位用--><view style="width:32px;padding:14px;margin-right:32px;"></view></view><view></view></view></view><!-- 表格区域 --><view id="table-container" class="table-container" wx:if="{{tableDetails.length != 0}}"><!--表名称--><view style="margin:20px">{{tableNameCN}}</view><!--表头--><scroll-view id="table-title" scroll-x="true" bindscroll="tableTitleOnMoveHandler" style="width: 100%;height: min-content;" scroll-left="{{tableTitleL}}"><view class="table-title"><view class="title-item" wx:for="{{tableTitles}}" wx:for-item="item" wx:for-index="idx" wx:key="idx">{{item}}</view></view></scroll-view><scroll-view id="table-body" scroll-x="true" scroll-y="true" bindscroll="tableBodyOnMoveHandler" style="width: 100%;max-height:300px;" scroll-left="{{tableBodyL}}"><view class="table-body" wx:for="{{tableDetails}}" wx:for-item="item" wx:for-index="idx" wx:key="idx"><scroll-view scroll-x="true" scroll-y="true" class="body-item" wx:for="{{item}}" wx:for-item="subItem" wx:for-index="subIdx" wx:key="subIdx">{{subItem}}</scroll-view></view></scroll-view></view>
</view>

index.wxss

page {padding-top: 54rpx;background-color: #f6f6f6;padding-bottom: 60rpx;
}
/*input区域样式*/
.input-area-with-line{width: 55%;height: 32px;margin-left: 32px;margin-right: 24px;background-image: -webkit-linear-gradient(to bottom,transparent 0%,transparent 95%, #91D300 95%, #91D300 100%);background-image: linear-gradient(to bottom,transparent 0%,transparent 95%, #91D300 95%, #91D300 100%) ;background-repeat:no-repeat;
}
.place-holder{margin-left: 10px;
}
.mini-btn{padding: 0;margin: 0 32px 0 0;background-color: #91D300;
}
.flex-to-row-container{display: flex;flex-wrap: nowrap;flex-direction: row;justify-content: center;margin-bottom: 10px;
}
.flex-to-col-container{display: flex;flex-wrap: nowrap;flex-direction: column;justify-content: center;
}
.lenovo-container{max-width: 55%;margin: 0 24px 0 32px;color: #808080;
}
.lenovo-item{height: 50rpx;padding-left: 20px;
}/*表格区域样式*/
.table-container{margin: 10px;
}
.table-title{display: flex;flex-wrap: nowrap;flex-direction: row;width: fit-content;
}
.title-item{text-align: center;margin-left: 10rpx;margin-right: 10rpx;min-width: 120px;max-width: 120px;height: 25px;background-image: -webkit-linear-gradient(to bottom,transparent 0%,transparent 90%, #07C160 90%, #07C160 100%);background-image: linear-gradient(to bottom,transparent 0%,transparent 90%, #07C160 90%, #07C160 100%) ;background-repeat:no-repeat;
}
.table-body{display: flex;flex-wrap: nowrap;flex-direction: row;width: fit-content;
}
.body-item{margin-left: 10rpx;margin-right: 10rpx;margin-top: 10px;min-width: 120px;max-width: 120px;height: 30px;white-space: nowrap;text-align: center;line-height: 30px;background-image: -webkit-linear-gradient(to bottom,transparent 0%,transparent 95%, #91D300 95%, #91D300 100%);background-image: linear-gradient(to bottom,transparent 0%,transparent 95%, #91D300 95%, #91D300 100%) ;font-family: Consolas;
}::-webkit-scrollbar{width: 0;height: 0;color: transparent;
}

应该是直接粘进去就能运行【doge】。。。

微信小程序输入联想、表格相关推荐

微信小程序输入车牌号（有新能源）
微信小程序输入车牌号(有新能源) <view class="page"><view class="carN ...
微信小程序上实现表格
微信小程序不支持 table 标签,在网上找到一个使用 flex 来实现表格的简明例子,记录一下. table.wxml <view class="table"> &l ...
微信小程序使用table表格
做小程序项目中遇到这种需要合并行和并列来展示数据但是小程序没有table标签不能使用合并行合并列找了很多发现小程序中有一个标签和 VUE中的 v-html是一样的功能 <rich-text ...
微信小程序——多级表头表格
*****因为小程序不支持table,没办法只能通过组件递归的方式实现多级表头的渲染 /*** 这是表头数据格式*/ headerList: [{"name":"city ...
微信小程序商品报价表格兼容PC端、手机端
1.固定表头.表格行高由内容撑开 2.图片自适应居中.图片预览 3.筛选条件置顶.显示所选的筛选分类 4.触底加载下一页 5.表格文字可复制 6.支持手机横屏.竖屏切换.横屏时隐藏底部 tabbar ...
uniapp微信小程序数据导出表格
项目需求:前端自定义表头并输出表格引用xlsx.core.min.js 但会有警告:[警告⚠] `utils\xlsx.core.min.js` 文件体积超过 500KB,已跳过压缩以及 ES6 ...
微信小程序输入文字用canvas生成公章并转为图片
<input type="text" placeholder="请输入公司名称" bindinput="bindInputCompany&quo ...
微信小程序canvas绘制表格
效果图 html <button catchtap="draw">打印</button <button bindtap="saveImg" ...
微信小程序输入手机号，验证码
如上图,想实现输入注册手机号,及6位数字验证码.并且输入后倒计时60秒主要分为 wxml,wxss,js 三块. 其中用到的倒计时模块,单独写成工具类使用. toast 是一个提示工具类,详见我另外 ...

微信小程序输入联想、表格

微信小程序输入联想、表格相关推荐

最新文章

热门文章