首先我們來(lái)分析下UI小妹發(fā)來(lái)的產(chǎn)品原型圖：

微信小程序商品分類頁(yè)需要實(shí)現(xiàn)

1.單擊左邊的商品類目，右側(cè)實(shí)現(xiàn)聯(lián)動(dòng)跳轉(zhuǎn)到對(duì)應(yīng)商品類目標(biāo)題；

2.觸屏拖動(dòng)右側(cè)商品列表，右側(cè)跳轉(zhuǎn)到對(duì)應(yīng)商品類目；

2.分析需求我們可以把屏幕分為以下部分，主要使用到viewscroll-view，代碼結(jié)構(gòu)和分解圖如下：

<view>    <!--搜索框-->    <view></view>    <!--商品類別.商品列表-->    <view><!--left--><scroll-view></scroll-view><!--right--><scroll-view></scroll-view>    </view></view>

3.搜索view比較簡(jiǎn)單，在這里就不在闡述，主要實(shí)現(xiàn)商品類別和商品列表的交互。

scroll-view使用到的屬性

scroll-y：允許縱向滾動(dòng)（需要設(shè)置高度）。

scroll-with-animation：在設(shè)置滾動(dòng)條位置時(shí)使用動(dòng)畫(huà)過(guò)渡。

scroll-top：設(shè)置豎向滾動(dòng)條位置（商品列表上下滑動(dòng)時(shí)動(dòng)態(tài)變更位置）。

scroll-into-view：值應(yīng)為某子元素id（id不能以數(shù)字開(kāi)頭）。設(shè)置哪個(gè)方向可滾動(dòng)，則在哪個(gè)方向滾動(dòng)到該元素。

代碼實(shí)現(xiàn)最后結(jié)果如下：

1.test.wxml

//*******************************************************//*      微信版螞蟻森林上線了！微信搜螞蟻森林立即體驗(yàn)！     *//*******************************************************<view>    <view></view>    <view><!--left--><scroll-view scroll-y scroll-with-animation scroll-top="{{navTop}}">    <view wx:for="{{dRes}}" wx:key="this" bindtap="tabSelect" data-id="{{index}}">{{item._name}}</view></scroll-view><!--right--><scroll-view scroll-y scroll-with-animation scroll-into-view="main-{{titleCur}}" bindscroll="VerticalMain">    <view wx:for="{{dRes}}" wx:key="this" id="main-{{index}}"><!--標(biāo)題--><view class="cu-bar">    <view class="action iconfont icon-icon_collect"> {{item._name}</view></view><!--列--><block wx:if="{{item.res.length>0}}">    <template is="hotSelling" wx:for="{{item.res}}" wx:key="this" data="{{item}}"></template></block><block wx:else>    <view>本類目無(wú)</view></block>    </view></scroll-view>    </view></view>

2.test.wxss

.VerticalBox {display: flex;width: 100vw;}.VerticalNav.nav {width: 200rpx;white-space: initial;}.VerticalNav.nav .cu-item {width: 100%;text-align: center;background-color: #fff;margin: 0;border: none;height: 50px;line-height: 50px;position: relative;}.VerticalNav.nav .cu-item.cur {background-color: #f1f1f1;}.text-green {color: #39b54a;font-weight: bold;}.VerticalNav.nav .cu-item.cur::after {content: ""; width: 18rpx;height: 40rpx;border-radius: 10rpx 0 0 10rpx;position: absolute;background-color: currentColor;top: 0;right: 0rpx;bottom: 0;margin: auto;}.VerticalMain {background-color: #f1f1f1;}.padding-top {padding-top: 30rpx;}.padding-lr {padding-left: 20rpx;padding-right: 20rpx;}.cu-bar {display: flex;position: relative;align-items: center;min-height: 100rpx;justify-content: space-between;position: relative;background-color: white;color: #666666;margin-bottom: 2rpx;background-image: linear-gradient(rgb(0, 180, 230), rgb(250, 250, 250));}.cu-bar .action {display: flex;align-items: center;height: 100%;justify-content: center;max-width: 100%;}

3.test.js

//*******************************************************//*      微信版螞蟻森林上線了！微信搜螞蟻森林立即體驗(yàn)！     *//*******************************************************// 微信版螞蟻森林：https://developers.weixin.qq.com/community/personal/oCJUswzZJO5lZcMDd3mKoDAClVdoconst app = getApp()Page({    data: {TabCur: 0, //當(dāng)前點(diǎn)擊TabtitleCur: 0,//標(biāo)題指引navTop: 0,load: true,dRes: [],    },    tabSelect(e) {let i = Number(e.currentTarget.dataset.id)this.setData({    TabCur: i,    titleCur: i,    navTop: (i - 1) * 50})    },    VerticalMain(e) {let self= this;let dRes = this.data.dRes;let tabHeight = 0;if (this.data.load) {    for (let i = 0; i < dRes.length; i++) {let view = wx.createSelectorQuery().select("#main-" + i);view.fields({    size: true}, data => {    dRes[i].top = tabHeight;    tabHeight = tabHeight + data.height;    dRes[i].bottom = tabHeight;}).exec()    }    self.setData({load: false,dRes: dRes    })}let scrollTop = e.detail.scrollTop + 20;for (let i = 0; i < dRes.length; i++) {    if (scrollTop > dRes[i].top && scrollTop < dRes[i].bottom) {that.setData({    navTop: (i - 1) * 50,    TabCur: i})return false    }}    }})

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)商品分類頁(yè)過(guò)程結(jié)束的文章就介紹到這了,更多相關(guān)小程序商品分類頁(yè)內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！