微信小程序?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)聽(tīng)頁(yè)面加載 */ onLoad: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(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ì)大家微信小程序開(kāi)發(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)獲取用戶(hù)信息并存入數(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)用的用戶(hù)體驗(yàn)效果,看到數(shù)字,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-03-03Jquery和JS用外部變量獲取Ajax返回的參數(shù)值的方法實(shí)例(超簡(jiǎn)單)
Jquery和JS用外部變量獲取Ajax返回的參數(shù)值的方法實(shí)例(超簡(jiǎn)單),需要的朋友可以參考一下2013-06-06JavaScript 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-12JavaScript實(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編寫(xiě),壓縮后只有9KB,非常值得在項(xiàng)目中使用,感興趣的小伙伴們可以參考一下2016-01-01javascript 關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼
屏蔽HTML標(biāo)簽,支持多關(guān)鍵字(以空格間隔),關(guān)鍵字內(nèi)可含有特殊字符2010-09-09