微信小程序?qū)崿F(xiàn)用table顯示數(shù)據(jù)庫(kù)反饋的多條數(shù)據(jù)功能示例
本文實(shí)例講述了微信小程序?qū)崿F(xiàn)用table顯示數(shù)據(jù)庫(kù)反饋的多條數(shù)據(jù)功能。分享給大家供大家參考,具體如下:
解決了微信小程序自定義表格,并顯示的多條數(shù)據(jù)的問(wèn)題。
index.wxml
<view>
<text>我的調(diào)查問(wèn)卷</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">查看我的數(shù)據(jù)</button>
</view>
index.js
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
items:[]//定義變長(zhǎng)數(shù)組
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
*/
onHide: function () {
},
change:function(e){
var that=this;
wx.request({
url: 'https://../data.php',//自己的服務(wù)器地址
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 = "***";//數(shù)據(jù)庫(kù)連接密碼
$dbname = "mydb";
// 創(chuàng)建連接
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢測(cè)連接
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();
?>
文章有借鑒,并非全部自創(chuàng)
希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。
- 微信小程序?qū)崿F(xiàn)簡(jiǎn)易table表格
- 一秒學(xué)會(huì)微信小程序制作table表格
- 微信小程序?qū)崿F(xiàn)的繪制table表格功能示例
- 微信小程序中顯示html格式內(nèi)容的方法
- 微信小程序顯示下拉列表功能【附源碼下載】
- 微信小程序 實(shí)現(xiàn)列表項(xiàng)滑動(dòng)顯示刪除按鈕的功能
- 微信小程序之多列表的顯示和隱藏功能【附源碼】
- 微信小程序?qū)崿F(xiàn)獲取用戶信息并存入數(shù)據(jù)庫(kù)操作示例
- 微信小程序設(shè)置全局請(qǐng)求URL及封裝wx.request請(qǐng)求操作示例
- 微信小程序使用wx.request請(qǐng)求服務(wù)器json數(shù)據(jù)并渲染到頁(yè)面操作示例
相關(guān)文章
bootstrap實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果
本篇文章主要介紹了bootstrap實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果,進(jìn)度條可以加強(qiáng)應(yīng)用的用戶體驗(yàn)效果,看到數(shù)字,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-03-03
Jquery和JS用外部變量獲取Ajax返回的參數(shù)值的方法實(shí)例(超簡(jiǎn)單)
Jquery和JS用外部變量獲取Ajax返回的參數(shù)值的方法實(shí)例(超簡(jiǎn)單),需要的朋友可以參考一下2013-06-06
JavaScript JSON.stringify()的使用總結(jié)
JSON是一種輕量級(jí)數(shù)據(jù)格式,可以方便地表示復(fù)雜數(shù)據(jù)結(jié)構(gòu)。JSON對(duì)象有兩個(gè)方法:stringify()和parse()。在簡(jiǎn)單的情況下,這兩個(gè)方法分別可以將JavaScript序列化為JSON字符串,以及將JSON解析為原生JavaScript值。本文著重介紹JSON.stringify()的使用方法和注意事項(xiàng)。2021-05-05
微信小程序簡(jiǎn)潔登錄頁(yè)面的實(shí)現(xiàn)(附源碼)
本文主要介紹了微信小程序簡(jiǎn)潔登錄頁(yè)面的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-12-12
JavaScript實(shí)現(xiàn)鼠標(biāo)滾輪控制頁(yè)面圖片切換功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)滾輪控制頁(yè)面圖片切換功能,涉及javascript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10
利用JS實(shí)現(xiàn)簡(jiǎn)單的瀑布流加載圖片效果
今天學(xué)習(xí)了一個(gè)瀑布流加載效果,很多網(wǎng)站都有瀑布流效果,下面通過(guò)本文給大家分享利用JS實(shí)現(xiàn)簡(jiǎn)單的瀑布流加載圖片效果,需要的朋友參考下吧2017-04-04
探究Javascript模板引擎mustache.js使用方法
這篇文章主要為大家介紹了Javascript模板引擎mustache.js使用方法,mustache.js是一個(gè)簡(jiǎn)單強(qiáng)大的Javascript模板引擎,使用它可以簡(jiǎn)化在js代碼中的html編寫,壓縮后只有9KB,非常值得在項(xiàng)目中使用,感興趣的小伙伴們可以參考一下2016-01-01
javascript 關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼
屏蔽HTML標(biāo)簽,支持多關(guān)鍵字(以空格間隔),關(guān)鍵字內(nèi)可含有特殊字符2010-09-09

