基于php微信小程序购物商城 校园二手商品 图书鲜花商城 毕业设计（2）分类

效果图

wxml代码

<view class='fenlei'> <!-- 左侧分类 --> <view class="zuo" style="height:{{winHeight}}px"> <block wx:for="{{navList}}" wx:key="*this"> <text class="type-nav {{curNav == item.id ? 'selected' : ''}}" bindtap="selectNav" data-index="{{index}}" data-id="{{item.id}}">{{item.name}} </text> </block> </view> <scroll-view scroll-y style="height: {{winHeight}}px;" class='zuixin' bindscrolltolower="bottom" > <block wx:for="{{zuixins}}" wx:key="*this"> <navigator url='/pages/chanpin/xiangxi?cpid={{item.cp_id}}&cpmc={{item.cp_mingcheng}}' class='paihang-item'> <view class='paihang-tupian'> <image class='paihang-img' src='{{item.cp_tupian}}' mode='widthFix'></image> </view> <view class='paihang-xinxi'> <text class='paihang-mingcheng'>{{item.cp_mingcheng}}</text> <text class='paihang-jianjie'>产品简介</text> <view> <text class='paihang-xuhao'>No.{{index+1}}</text> <text class='paihang-xiaoshou'> | 456人付款 | </text> <text class='paihang-jiage0'> ¥</text> <text class='paihang-jiage1'> {{item.jiage}}</text> </view> </view> </navigator> </block> </scroll-view> </view> <loading hidden="{{hidden}}"> 加载中... </loading>

wxss代码

.fenlei{ height: 100%; box-sizing: border-box; background-color: #f4f4f4; display: flex; flex-direction: row; width: 100%; } .zuo{ width:20%; border-right: 1px solid #ddd; font-size: .85rem; height: 100%; display: flex; flex-direction: column; } .type-nav{ position: relative; text-align: center; padding: 5px 0; border-bottom: 1px solid #ddd; z-index: 10; } .selected{ margin-right: -1px; padding-left:-1px; color: #333; background-color: #fff; } /*销售排行*/ .zuixin{width: 80%; background-color: white;} .paihang-item { display: flex; padding: 5px; width: 100%; } .paihang-tupian { width: 30%; } .paihang-img { width: 100%; border: 1px solid gainsboro; border-radius: 5px; box-shadow: 0px 2px 2px gainsboro; } .paihang-xinxi { width: 70%; margin-left: 5px; margin-right: 10px; display: flex; flex-direction: column; } .paihang-mingcheng { font-size: 13px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .paihang-jianjie { font-size: 11px; color: gray; margin: 3px 0; } .paihang-xuhao { color: green; font-size: 13px; } .paihang-xiaoshou { font-size: 11px; color: gray; } .paihang-jiage0 { font-size: 10px; color: red; } .paihang-jiage1 { font-size: 13px; color: red; }

js代码

//获取应用实例 var app = getApp() Page({ /** * 页面的初始数据 */ data: { hidden: true, winWidth:0, winHeight:0, navList:[], curNav : 0, zuixins: [], page_kaishi:0, page_zong:0 }, //选择 左侧不同的分类；右侧加载不同的分类产品 selectNav:function(event){ var that = this; var id = event.target.dataset.id console.log(id) that.setData({ curNav : id}) //重新选定分类后，需要重新初始化 that.setData({ zuixins:[], page_kaishi:0 }) wx.request({ //url: app.myapp.php + '/wx_fenlei_chanpin.php', //php版 url: app.myapp.php + '/wx_api_CpList_All.php', //php版本,带下拉 20200520更新 data: { page: that.data.page_kaishi, cs_lxid:id }, success:function(res) { that.setData({ zuixins: res.data, page_zong: res.data[0].yeshu }) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that=this; //获取系统信息 wx.getSystemInfo({ success: function(res) { that.setData({ winHeight:res.windowHeight, winWidth:res.windowWidth }) }, }) //加载 左侧 分类 wx.request({ //url: 'http://www.yaoyiwangluo.com/wx_fenlei.asp', //asp版接口 //url: app.myapp.asp + '/wx_fenlei.asp', //asp版 url: app.myapp.php + '/wx_fenlei.php', //php版 //url: app.myapp.jsp + '/wx_fenlei.jsp', //jsp版 success:function(res){ that.setData({ navList: res.data}) } }) //最新 上架产品 wx.request({ //url: app.myapp.php + '/wx_CpList_top4.php', //php版本 url: app.myapp.php + '/wx_api_CpList_All.php', //php版本,带下拉 20200520更新 data:{ page:that.data.page_kaishi }, success: function (res) { console.log("总的页数："+res.data[0].yeshu) that.setData({ zuixins: res.data, page_zong: res.data[0].yeshu }) } }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, bottom:function(){ var that = this; console.log("触底"); if(that.data.page_kaishi < that.data.page_zong-1){ //console.log("当前页数1："+ that.data.page_kaishi); that.data.page_kaishi=that.data.page_kaishi+1; //console.log("当前页数2："+ that.data.page_kaishi); that.fetchData(that.data.page_kaishi); }else{ console.log("没有数据了") wx.showToast({ title: '没有更多数据了', }) } }, fetchData: function (yeshu) { var that = this; console.log("当前加载页数：" + yeshu) console.log("当前类型id：" + that.data.curNav) that.setData({ hidden: false }) wx.request({ url: app.myapp.php + '/wx_api_CpList_All.php', //php版本,带下拉 20200520更新 data: { page: yeshu, cs_lxid:that.data.curNav }, success: function (res) { console.log("数组的长度：" + res.data.length) //console.log(res.data[0].title) for (var i = 0; i < res.data.length; i++) { var obj = {}; obj.cp_id = res.data[i].cp_id; obj.cp_mingcheng = res.data[i].cp_mingcheng; obj.jiage = res.data[i].jiage; obj.cp_tupian = res.data[i].cp_tupian; obj.yeshu = res.data[i].yeshu; let nodes = that.data.zuixins; nodes.push(obj) that.setData({ zuixins: nodes }) } setTimeout(function () { that.setData({ hidden: true }) }, 300) } }) }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })