迅睿CMS:小程序模块内容列表数据调用_迅睿教程

迅睿CMS:小程序模块内容列表数据调用

迅睿教程 2024-10-23 10:21:01 0次 0 来源：老K模板网收藏

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

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 laok-n1ngmos" scroll-y="true">
<block wx:for="{{listData}}" wx:for-item="news">
   <navigator url="../news/show?id={{news.id}}">
   <view class="news-view laok-myekdxm">
     <image src="{{news.thumb}}" wx:if="{{news.thumb!=''}}"/>
     <view class="news-content laok-ejpo3ow">
             <view class="news-title laok-6mllmni">
             {{news.title}}
             </view>           
           <view class="pos laok-roxyrvd">
                <view class="news-time laok-h5ob6pb">{{news.inputtime}}</view>
                <view class="fr laok-n4mz8oa">
                  <view class="news-see laok-1g1x2el">
                  <image src="../../icons/see.png" />
                  {{news.hits}}
                  </view>
                  <view class="news-pl laok-1ktjlnc">
                  <image src="../../icons/message.png" />
                  {{news.comments}}
                  </view>
                </view>
            </view>
     </view>
   </view>
   </navigator>
   </block>
</scroll-view>

<view class="pl-bottom laok-0km0des">
<view hidden="{{hidden}}" class="hidden laok-0rhimde" wx:if="{{hasMore!='true'}}"> 正在加载....</view>
<view hidden="{{hidden}}" class="hidden laok-0rhimde" 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;
}

迅睿CMS:小程序模块内容列表数据调用

相关文档

网友留言

搜索帮助

人气文章

关注我们

关于我们

常见问题

扫一扫手机访问