小程序实战入门009---小程序表格实现,小程序做加减乘除简单运算

简介: 小程序实战入门009---小程序表格实现,小程序做加减乘除简单运算

小程序默认是不支持table表格的,如果我们想实现小程序表格效果,就得自己拼凑。实现方案有很多,不过个人感觉通过form和input标签来实现是比较好的方式。



下面来看下实现思路


一,首先看index.wxml文件


这里用form实现整个表格,然后input实现表格内的单元格。布局其实很简单,主要是布局完成后通过css来实现表格样式

这里有几点要说明的

1,input可以通过设置disabled来不让用户输入,这样就可以作为纯文本展示。比如上图的文本

2,表格的间隔先需要自己用wxss来拼凑

这里贴代码不太好看,如果想看详情代码可以查看原文去查看,这里简单截一段代码图片

 

     

二,再来看index.wxss文件


这里我不多说了,代码里都有注释

/*index.wxss  */

到这里我们就可以实现小程序表格效果了


结语


-其实小程序学起来很容易,你只需要会基本的css样式和js就可以直接上手写小程序。并且小程序封装的一些组件,比如首页轮播图只需要用小程序的swiper 组件就能很好的实现自动轮播,循环轮播,定时轮播。传送门:http://blog.csdn.net/qiushi_1990/article/details/77922876


系列教程


-由于之前都是在csdn上写的零基础自学小程序前8章教程,感兴趣的可以移步过去看下,有图有源码:http://blog.csdn.net/qiushi_1990/article/category/6536726


关于源码


- 其实文章里贴出的就是完整的源码了,如果你想要整个项目源码可以移步到:https://github.com/qiushi123/xiaochengxu_demos  

相关文章
|
26天前
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序,涵盖环境搭建、核心功能实现、多平台部署与优化,提供完整技术方案。实战导向,助力开发者高效入门与落地。
|
26天前
|
小程序 PHP 图形学
热门小游戏源码(Python+PHP)下载-微信小程序游戏源码Unity发实战指南​
本文详解如何结合Python、PHP与Unity开发并部署小游戏至微信小程序。涵盖技术选型、Pygame实战、PHP后端对接、Unity转换适配及性能优化,提供从原型到发布的完整指南,助力开发者快速上手并发布游戏。
|
5月前
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
345 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
187 1
|
8月前
|
人工智能 自然语言处理 小程序
让小程序拥有“视觉之眼“:DeepSeek图像识别实战指南
本文介绍如何通过DeepSeek计算机视觉技术,赋予小程序“看懂世界”的能力。从构建视觉感知系统、训练专属视觉词典到创造会思考的界面,详细讲解了实现智能相册、植物识别器和老旧照片修复等功能的步骤。最后探讨性能优化与安全合规要点,展望未来视觉智能应用的无限可能。
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
310 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
129 1
|
12月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
1824 0
|
小程序 前端开发 JavaScript
小程序入门之认识view和text组件
小程序入门之认识view和text组件
221 0
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——个人中心页面的制作
本文介绍了如何设计和实现一个网上花店的微信小程序,包括个人中心、我的订单和我的地址等功能模块。个人中心让用户能够查看订单历史、管理地址和与客服互动。代码示例展示了`own.wxml`、`own.wxss`和`own.js`文件,用于构建个人中心界面,包括用户信息、订单链接、收藏、地址、客服和版本信息。我的订单部分展示了订单详情,包括商品图片、名称、销量、价格和订单状态,用户可以查看和管理订单。我的地址功能允许用户输入和编辑收货信息,包括联系人、性别、电话、城市和详细地址。每个功能模块都附有相应的WXML和WXSS代码,以及简洁的样式设计。
789 0
【微信小程序开发实战项目】——个人中心页面的制作

热门文章

最新文章