• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序分类页面(左右滑动互不影响)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

wxml:

<view class="classify">

<!--分类导航栏-->

<scroll-view class='left-navbar' scroll-y="true">

<view wx:for="{{navLeftItems}}" class="nav_left_items {{curNav == index? 'active' : ''}}" wx:key="key" bindtap="left" data-index="{{index}}">{{item.name}}

</view>

<view>其他分类</view>

</scroll-view>

<scroll-view id="right" scroll-y="true" scroll-top="{{scrollTop}}">

<!--顶部图片-->

<view class="goods-banner">

<image class="img-banner" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532341900&di=0f2fc8e00aba62424e315686b95cbc71&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F016d865795e7010000018c1bda195b.jpg" mode="scaleToFill"></image>

</view>

<!--商品展示-->

<view class="goods-list">

<view wx:for='{{navRightItems[curIndex].sub}}' class="goods" wx:key="unique" bindtap="ToSearchResult" id="{{item.screenName}}">

<image class="img" wx:if='{{item.icon}}' src="{{item.icon}}"></image>

<text wx:if='{{item.name}}'>{{item.name}}</text>

</view>

</view>

</scroll-view>

</view>

 

wxcss:

/**分类栏**/

 

.classify {

/* margin-top: 100rpx; */

}

 

.left-navbar {

position: absolute;

left: 0;

width: 25%;

height: 100%;

background-color: #eee;

font-size: 15px;

}

 

.left-navbar view {

height: 80rpx;

line-height: 80rpx;

text-align: center;

}

 

.active {

background-color: #fff;

color: red;

font-size: 17px;

}

 

#right {

position: absolute;

right: 0;

width: 75%;

height: 100%;

}

 

.img-banner {

height: 150rpx;

width: 100%;

}

 

.goods-list {

display: flex;

flex-wrap: wrap;

margin-top: 30rpx;

}

 

.goods-title {

width: 100%;

font-size: 15px;

font-weight: bold;

padding-left: 10rpx;

}

 

.goods {

width: 150rpx;

font-size: 14px;

margin: 15rpx;

text-align: center;

}

 

.img {

width: 140rpx;

height: 140rpx;

}

js:

 

Page({

data: {

navLeftItems: [],

navRightItems: [],

curNav: 0,

curIndex: 0,

},

onLoad: function(options) {

var that = this;

wx.request({

url: 'http://119.29.207.185/api/Goods/getFactoryCate',

success: function(res) {

console.log(res,"数据")

that.setData({

navLeftItems: res.data.data,

navRightItems: res.data.data

})

}

})

},

 

// 左侧按钮

left: function(e) {

var that = this;

var index = e.currentTarget.dataset.index;

console.log(index, "左侧按钮")

 

that.setData({

curNav: index,

curIndex: index,

 

})


 

}

 

})


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序-走迷宫 - tomcat and jerry发布时间:2022-07-18
下一篇:
.NET WinForm画树叶小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap