微信小程序实现用table显示数据库反馈的多条数据功能示例

本文实例讲述了微信小程序实现用table显示数据库反馈的多条数据功能。分享给大家供大家参考,具体如下:

解决了微信小程序自定义表格,并显示的多条数据的问题。

index.wxml

<view>
 <text>我的调查问卷</text>
 <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex">
 <view class="table">
  <view class="tr bg-header">
   <view class="th">姓名</view>
   <view class="th">性别</view>
   <view class="th">年龄</view>
  </view>
  <view class="tr bg-items" wx:for = "{{items}}" wx:key="">
   <text class="td">{{item.name}}</text>
   <text class="td">{{item.gender}}</text>
   <text class="td">{{item.age}}</text>
  </view>
 </view>
 </scroll-view>
 <button bindtap="change">查看我的数据</button>
</view>

index.js

Page({
 /**
  * 页面的初始数据
  */
 data: {
  items:[]//定义变长数组
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function () {
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 },
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 },
 change:function(e){
  var that=this;
  wx.request({
   url: 'https://../data.php',//自己的服务器地址
   header: {
    "Content-Type": "application/json"
   },
   method: "POST",
   success: function (res) {
    for (var i = 0, len = res.data.length; i < len; i++){
     that.data.items[i] = res.data[i];
    }
    that.setData({
     items: that.data.items
    })
   },
   fail: function (res) {
    wx.showToast({
     'title': 'request fail'
    })
   }
  })
 }
})

data.php

<?php
$servername = "localhost";
$username = "root";
$password = "***";//数据库连接密码
$dbname = "mydb";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) {
 die("connect server fail: " . $conn->connect_error);
}
$query = "select * from table";
$result = mysqli_query($conn,$query);
$data = array();
while ($rows = mysqli_fetch_assoc($result))
{
$data[] = $rows;
}
echo json_encode($data);
$conn->close();
?>

文章有借鉴,并非全部自创

希望本文所述对大家微信小程序开发有所帮助。

(0)

相关推荐

  • 微信小程序 实现列表项滑动显示删除按钮的功能

    微信小程序 实现列表项滑动显示删除按钮的功能 微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.

  • 微信小程序实现的绘制table表格功能示例

    本文实例讲述了微信小程序实现的绘制table表格功能.分享给大家供大家参考,具体如下: 表格的绘制 js Page({ data:{ infeed:['"", "1周", "2周", "3周", "总计"], endwise1: "游泳", tb1:"0", tb2:"0", tb3:"0", tb4:"0"

  • 微信小程序实现获取用户信息并存入数据库操作示例

    本文实例讲述了微信小程序实现获取用户信息并存入数据库操作.分享给大家供大家参考,具体如下: 微信小程序获取用户信息简单,但是在存入自己服务器数据库的过程中研究了一天多的时间,并且网上搜索不到该资源,故发出来供大家参考. index.js Page({ data: { nickName: "微信账号登录", avatarUrl:"./user-unlogin.png", }, onLoad: function () { var that = this; var nic

  • 微信小程序中显示html格式内容的方法

    前言 最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. 准备工作: 首先我们下载wxParse github地址:https://github.com/icindy/wxParse 本地下载:http://xiazai.jb51.net/201704/yuanma/wxParse-master(jb51.net).rar wx

  • 微信小程序显示下拉列表功能【附源码下载】

    本文实例讲述了微信小程序显示下拉列表功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 app.json文件: { "pages":[ "views/views", "views/navigators/navigator1/navigator1", "views/navigators/navigator2/navigator2", "views/navigators/navigator3/naviga

  • 一秒学会微信小程序制作table表格

    大家都知道微信小程序自身没有提供表格这个组件,但是今天的项目需求又出现了,所以只能模仿一个了. 效果图: 代码挺简单方便的: wxml: <view class='history-table-wrap'> <view class="table"> <view class="tr"> <view class="th th1">日期</view> <view class="t

  • 微信小程序实现简易table表格

    本文实例为大家分享了微信小程序实现简易表格的具体代码,供大家参考,具体内容如下 由于需要开发小程序,前端又是自己弄,类似table的标签也没有,后来看到小程序文档中推荐使用flex布局,就把css中的flex布局学了一遍,效果还行,大家将就看一下 table.wxml <view class="table"> <view class="tr bg-w"> <view class="th">head1</v

  • 微信小程序之多列表的显示和隐藏功能【附源码】

    今天在项目碰到一个问题,之前在项目首页实现单列表的显示和隐藏,通过wx:if判断就可实现,现在要实现多列表的单项显示和隐藏功能应该如何实现呢?如果还用wx:if实现的话会出现点击一个列表项,多个列表同时显示和隐藏,明显不适合功能需求,然后简单地查了资料也没发现有类似的功能,最后思考一番后,慢慢地理清了思路... 效果图: 实现思路: 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项,可以用数据的id: css中定义一个hidden{display:none}控制显示和

  • 微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例

    本文实例讲述了微信小程序使用wx.request请求服务器json数据并渲染到页面操作.分享给大家供大家参考,具体如下: 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更新,而小程序数据主要是json数据格式,所以我们可以利用php操作数据库,把数据以json格式数据输出即可.现在给大家讲一下,微信小程序的wx.request进行服务器数据请求的用法: 官方文档给出了示例代码,但是我这边自己进行了简单的处理: index.js Page({ data: { }, onLoad: fun

  • 微信小程序设置全局请求URL及封装wx.request请求操作示例

    本文实例讲述了微信小程序设置全局请求URL及封装wx.request请求操作.分享给大家供大家参考,具体如下: app.js: App({ //设置全局请求URL globalData:{ URL: 'https://www.oyhdo.com', }, /** * 封装wx.request请求 * method: 请求方式 * url: 请求地址 * data: 要传递的参数 * callback: 请求成功回调函数 * errFun: 请求失败回调函数 **/ wxRequest(metho

随机推荐