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

最新推荐文章于 2023-07-12 09:58:12 发布

李茂才

最新推荐文章于 2023-07-12 09:58:12 发布

阅读量856

点赞数 1

分类专栏：微信小程序文章标签：小程序微信

本文链接：https://blog.csdn.net/m0_37748310/article/details/120613249

版权

本文介绍如何在微信小程序中自制表格组件，包括输入字联想功能和使用scroll-view实现表头固定及左右滚动的表格。作者分享了代码实现，并提供了微信代码片段链接供参考。

摘要由CSDN通过智能技术生成

最近看到微信小程序并没有自带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",