快捷搜索:  汽车  科技

小程序开发调用本地接口(小程序模块内容列表数据调用)

小程序开发调用本地接口(小程序模块内容列表数据调用)<scroll-view class="news-item" scroll-y="true"> <block wx:for="{{listData}}" wx:for-item="news"> <navigator url="../news/show?id={{news.id}}"> <view class="news-view"> <image src="{{news.thumb}}" wx:if="{{news.thumb!=''}}"/> <view class="news-content"> &l

小程序开发调用本地接口(小程序模块内容列表数据调用)(1)

调用模块内容数据在小程序页面中显示,用到的api接口是:

/index.php?appid=[授权ID]&appsecret=[授权码]&s=[模块目录]&c=search&pagesize=10&page=1&api_call_function=module_search_news_lis

pages\news\list.js 文件中请求小程序的代码

var app=getApp();//获取appid Page({ /** * 页面的初始数据 */ data: { listData:[] hidden: true page: 1 hasMore:"false" } onLoad:function(options){ // 请求服务器数据 var self=this; wx.request({ url: "http://www.pcms.com/index.php?appid=2&appsecret=PHPCMF9BF840CB2139F&s=news&c=search&pagesize=10&api_call_function=module_search_news_list" method: 'GET' success: function(res){ console.log(res.data); if (res.data.code == 1) { self.setData({ listData:res.data.data page: 1 }); } else { console.log(res.data.msg); } } }) } onReachBottom:function(){ // 绑定分页操作 this.setData({hidden:false}); var self=this; var pageid = self.data.page 1; wx.request({ url: "http://www.pcms.com/index.php?appid=2&appsecret=PHPCMF9BF840CB2139F&s=news&c=search&pagesize=10&api_call_function=module_search_news_list" method: 'GET' data: { page: pageid } success: function(res){ if (res.data.code == 1) { if(res.data.data.length==0){ self.setData({ hasMore:"true" hidden:false }); setTimeout(function(){ self.setData({ hasMore:"false" hidden:true }); } 900) }else{ self.setData({ listData:res.data.data hidden:true page:pageid }); } } else { console.log(res.data.msg); } } }) } })

这个请求代码表示请求后台news模块的内容数据

pages\news\list.wxml 小程序模板代码为:

<scroll-view class="news-item" scroll-y="true"> <block wx:for="{{listData}}" wx:for-item="news"> <navigator url="../news/show?id={{news.id}}"> <view class="news-view"> <image src="{{news.thumb}}" wx:if="{{news.thumb!=''}}"/> <view class="news-content"> <view class="news-title"> {{news.title}} </view> <view class="pos"> <view class="news-time">{{news.inputtime}}</view> <view class="fr"> <view class="news-see"> <image src="../../icons/see.png" /> {{news.hits}} </view> <view class="news-pl"> <image src="../../icons/message.png" /> {{news.comments}} </view> </view> </view> </view> </view> </navigator> </block> </scroll-view> <view class="pl-bottom"> <view hidden="{{hidden}}" class="hidden" wx:if="{{hasMore!='true'}}"> 正在加载....</view> <view hidden="{{hidden}}" class="hidden" wx:else>没有更多数据了....</view> </view>

pages\news\list.wxss

.index-banner{ width: 100%; height: 285rpx; } .index-banner image{ width: 100%; height: 100%; } .fast-news{ padding: 30rpx 30rpx 30rpx 30rpx; display: flex; border-bottom: 1px solid #eeeeee; } .red-sub{ width: 80rpx; height: 34rpx; background-color: #ff402e; color: white; font-size: 28rpx; text-align: center; line-height: 34rpx; border-radius: 2rpx; } .kx-title{ font-size: 32rpx; margin-left: 20rpx; } .news-item{ width: 100%; } .news-view{ padding: 30rpx 0 30rpx 0; display: flex; border-bottom: 1px solid #eeeeee; margin: 0 30rpx 0 30rpx; } .news-view image{ width: 241rpx; height: 148rpx; } .news-content{ margin-left: 20rpx; width: 100%; } .news-title{ line-height: 45rpx; overflow: hidden; font-size: 28rpx; padding-bottom: 30rpx; } .news-hot{ box-sizing: border-box; border: 1px solid #ff402e; width: 80rpx; height:40rpx; line-height: 40rpx; text-align: center; font-size: 13rpx; color: #ff402e; margin-left: 10rpx; } .pl-bottom { margin-top:30rpx; }

猜您喜欢: