分享微信朋友实现Step1onShareAppMessage(res){if(res.from==='button'){//来自页面内分享按钮console.log(res.target)}return{title:'自定义分享标题',path:'pages/index/index'}},Step2buttonopen-type="share"分享/button分类category.vuetemplateviewclass="content"scroll-viewscroll-yclass="left-aside"viewv-for="iteminflist":key="item.id"class="f-itemb-b":class="{active:item.id===currentId}"@click="tabtap(item)"{{item.name}}/view/scroll-viewscroll-viewscroll-with-animationscroll-yclass="right-aside"@scroll="asideScroll":scroll-top="tabScrollTop"viewv-for="iteminslist":key="item.id"class="s-list":id="'main-'+item.id"textclass="s-item"{{item.name}}/textviewclass="t-list"view@click="navToList(item.id,titem.id)"v-if="titem.pid===item.id"class="t-item"v-for="titemintlist":key="titem.id"image:src="titem.picture"/imagetext{{titem.name}}/text/view/view/view/scroll-view/view/templatescriptexportdefault{data(){return{sizeCalcState:false,tabScrollTop:0,currentId:1,flist:[],slist:[],tlist:[],}},onLoad(){this.loadData();},methods:{asyncloadData(){//letlist=awaitthis.$api.json('cateList');uni.request({url:'http://localhost:9081/mixmall/product/showCategory',//仅为示例，并非真实接口地址。data:{text:'uni.request'},//dataType:"jsonp",header:{'custom-header':'hello'//自定义请求头信息},success:(res)={console.log(res);letlist=res.data.body;console.log("*********************");console.log(list);uni.setStorage({//缓存用户登陆状态key:'cateList',data:list})list.forEach(item={if(!item.pid){console.log("********1级分类*************");console.log(item);this.flist.push(item);//pid为父级id,没有pid或者pid=0是一级分类}elseif(!item.picture){console.log("********2级分类*************");console.log(item);this.slist.push(item);//没有图的是2级分类}else{console.log("********3级分类*************");console.log(item);this.tlist.push(item);//3级分类}})}});},//一级分类点击tabtap(item){if(!this.sizeCalcState){this.calcSize();}this.currentId=item.id;letindex=this.slist.findIndex(sitem=sitem.pid===item.id);this.tabScrollTop=this.slist[index].top;},//右侧栏滚动asideScroll(e){if(!this.sizeCalcState){this.calcSize();}letscrollTop=e.detail.scrollTop;lettabs=this.slist.filter(item=item.top=scrollTop).reverse();if(tabs.length0){this.currentId=tabs[0].pid;}},//计算右侧栏每个tab的高度等信息calcSize(){leth=0;this.slist.forEach(item={letview=uni.createSelectorQuery().select("#main-"+item.id);view.fields({size:true},data={item.top=h;h+=data.height;item.bottom=h;}).exec();})this.sizeCalcState=true;},navToList(sid,tid){uni.navigateTo({url:`/pages/product/list?fid=${this.currentId}sid=${sid}tid=${tid}`})}}}/scriptstylelang='scss'page,.content{height:100%;background-color:#f8f8f8;}.content{display:flex;}.left-aside{flex-shrink:0;width:200upx;height:100%;background-color:#fff;}.f-item{display:flex;align-items:center;justify-content:center;width:100%;height:100upx;font-size:28upx;color:$font-color-base;position:relative;.active{color:$base-color;background:#f8f8f8;:before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);height:36upx;width:8upx;background-color:$base-color;border-radius:04px4px0;opacity:.8;}}}.right-aside{flex:1;overflow:hidden;padding-left:20upx;}.s-item{display:flex;align-items:center;height:70upx;padding-top:8upx;font-size:28upx;color:$font-color-dark;}.t-list{display:flex;flex-wrap:wrap;width:100%;background:#fff;padding-top:12upx;:after{content:'';flex:99;height:0;}}.t-item{flex-shrink:0;display:flex;justify-content:center;align-items:center;flex-direction:column;width:176upx;font-size:26upx;color:#666;padding-bottom:20upx;image{width:140upx;height:140upx;}}/style产品列表list.vuetemplateviewclass="content"viewclass="navbar":style="{position:headerPosition,top:headerTop}"viewclass="nav-item":class="{current:filterIndex===0}"@click="tabClick(0)"综合排序/viewviewclass="nav-item":class="{current:filterIndex===1}"@click="tabClick(1)"销量优先/viewviewclass="nav-item":class="{current:filterIndex===2}"@click="tabClick(2)"text价格/textviewclass="p-box"text:class="{active:priceOrder===1filterIndex===2}"class="yticonicon-shang"/texttext:class="{active:priceOrder===2filterIndex===2}"class="yticonicon-shangxia"/text/view/viewtextclass="cate-itemyticonicon-fenlei1"@click="toggleCateMask('show')"/text/viewviewclass="goods-list"viewv-for="(item,index)ingoodsList":key="index"class="goods-item"@click="navToDetailPage(item)"viewclass="image-wrapper"image:src="item.image"mode="aspectFill"/image/viewtextclass="titleclamp"{{item.title}}/textviewclass="price-box"textclass="price"{{item.price}}/texttext已售{{item.sales}}/text/view/view/viewuni-load-more:status="loadingType"/uni-load-moreviewclass="cate-mask":class="cateMaskState===0?'none':cateMaskState===1?'show':''"@click="toggleCateMask"viewclass="cate-content"@click.stop.prevent="stopPrevent"@touchmove.stop.prevent="stopPrevent"scroll-viewscroll-yclass="cate-list"viewv-for="itemincateList":key="item.id"viewclass="cate-itemb-btwo"{{item.name}}/viewviewv-for="tIteminitem.child":key="tItem.id"class="cate-itemb-b":class="{active:tItem.id==cateId}"@click="changeCate(tItem)"{{tItem.name}}/view/view/scroll-view/view/view/view/templatescriptimportuniLoadMorefrom'@/components/uni-load-more/uni-load-more.vue';exportdefault{components:{uniLoadMore},data(){return{cateMaskState:0,//分类面板展开状态headerPosition:"fixed",headerTop:"0px",loadingType:'more',//加载更多状态filterIndex:0,cateId:0,//已选三级分类idpriceOrder:0,//1价格从低到高2价格从高到低cateList:[],goodsList:[]};},onLoad(options){//#ifdefH5this.headerTop=document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';//#endifthis.cateId=options.tid;this.loadCateList(options.fid,options.sid);this.loadData();},onPageScroll(e){//兼容iOS端下拉时顶部漂移if(e.scrollTop=0){this.headerPosition="fixed";}else{this.headerPosition="absolute";}},//下拉刷新onPullDownRefresh(){this.loadData('refresh');},//加载更多onReachBottom(){this.loadData();},methods:{//加载分类asyncloadCateList(fid,sid){//letlist=awaitthis.$api.json('cateList');uni.getStorage({key:'cateList',success:(res)={console.log("********cateList**********")console.log(res)letlist=res.data;letcateList=list.filter(item=item.pid==fid);cateList.forEach(item={lettempList=list.filter(val=val.pid==item.id);item.child=tempList;})this.cateList=cateList;}});},//加载商品，带下拉刷新和上滑加载asyncloadData(type='add',loading){//没有更多直接返回if(type==='add'){if(this.loadingType==='nomore'){return;}this.loadingType='loading';}else{this.loadingType='more'}//letgoodsList=awaitthis.$api.json('goodsList');uni.request({url:'http://localhost:9081/mixmall/product/showProduct/'+this.cateId,data:{text:'uni.request'},header:{'custom-header':'hello'//自定义请求头信息},success:(res)={console.log(res.data);letgoodsList=res.data.body;if(type==='refresh'){this.goodsList=[];}//筛选，测试数据直接前端筛选了if(this.filterIndex===1){goodsList.sort((a,b)=b.sales-a.sales)}if(this.filterIndex===2){goodsList.sort((a,b)={if(this.priceOrder==1){returna.price-b.price;}returnb.price-a.price;})}this.goodsList=this.goodsList.concat(goodsList);}});//判断是否还有下一页，有是more没有是nomore(测试数据判断大于20就没有了)this.loadingType=this.goodsList.length20?'nomore':'more';if(type==='refresh'){if(loading==1){uni.hideLoading()}else{uni.stopPullDownRefresh();}}},//筛选点击tabClick(index){if(this.filterIndex===indexindex!==2){return;}this.filterIndex=index;if(index===2){this.priceOrder=this.priceOrder===1?2:1;}else{this.priceOrder=0;}uni.pageScrollTo({duration:300,scrollTop:0})this.loadData('refresh',1);uni.showLoading({title:'正在加载'})},//显示分类面板toggleCateMask(type){lettimer=type==='show'?10:300;letstate=type==='show'?1:0;this.cateMaskState=2;setTimeout(()={this.cateMaskState=state;},timer)},//分类点击changeCate(item){this.cateId=item.id;this.toggleCateMask();uni.pageScrollTo({duration:300,scrollTop:0})this.loadData('refresh',1);uni.showLoading({title:'正在加载'})},//详情navToDetailPage(item){//测试数据没有写id，用title代替letid=item.title;uni.navigateTo({url:`/pages/product/product?id=${id}`})},stopPrevent(){}},}/scriptstylelang="scss"page,.content{background:$page-color-base;}.content{padding-top:96upx;}.navbar{position:fixed;left:0;top:var(--window-top);display:flex;width:100%;height:80upx;background:#fff;box-shadow:02upx10upxrgba(0,0,0,.06);z-index:10;.nav-item{flex:1;display:flex;justify-content:center;align-items:center;height:100%;font-size:30upx;color:$font-color-dark;position:relative;.current{color:$base-color;:after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:120upx;height:0;border-bottom:4upxsolid$base-color;}}}.p-box{display:flex;flex-direction:column;.yticon{display:flex;align-items:center;justify-content:center;width:30upx;height:14upx;line-height:1;margin-left:4upx;font-size:26upx;color:#888;.active{color:$base-color;}}.xia{transform:scaleY(-1);}}.cate-item{display:flex;justify-content:center;align-items:center;height:100%;width:80upx;position:relative;font-size:44upx;:after{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);border-left:1pxsolid#ddd;width:0;height:36upx;}}}/*分类*/.cate-mask{position:fixed;left:0;top:var(--window-top);bottom:0;width:100%;background:rgba(0,0,0,0);z-index:95;transition:.3s;.cate-content{width:630upx;height:100%;background:#fff;float:right;transform:translateX(100%);transition:.3s;}.none{display:none;}.show{background:rgba(0,0,0,.4);.cate-content{transform:translateX(0);}}}.cate-list{display:flex;flex-direction:column;height:100%;.cate-item{display:flex;align-items:center;height:90upx;padding-left:30upx;font-size:28upx;color:#555;position:relative;}.two{height:64upx;color:#303133;font-size:30upx;background:#f8f8f8;}.active{color:$base-color;}}/*商品列表*/.goods-list{display:flex;flex-wrap:wrap;padding:030upx;background:#fff;.goods-item{display:flex;flex-direction:column;width:48%;padding-bottom:40upx;:nth-child(2n+1){margin-right:4%;}}.image-wrapper{width:100%;height:330upx;border-radius:3px;overflow:hidden;image{width:100%;height:100%;opacity:1;}}.title{font-size:$font-lg;color:$font-color-dark;line-height:80upx;}.price-box{display:flex;align-items:center;justify-content:space-between;padding-right:10upx;font-size:24upx;color:$font-color-light;}.price{font-size:$font-lg;color:$uni-color-primary;line-height:1;:before{content:'￥';font-size:26upx;}}}/style