微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動(dòng)效果
更新時(shí)間：2022年08月03日 14:17:09 作者：只會(huì)cv的小前端
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動(dòng)效果，代碼很簡(jiǎn)單，直接復(fù)制即可根據(jù)自己的需求去修改，對(duì)小程序商品數(shù)據(jù)聯(lián)動(dòng)實(shí)例代碼感興趣的朋友一起看看吧
微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動(dòng)
直接復(fù)制代碼更改可以看出效果，然后根據(jù)自己想要進(jìn)行調(diào)整
注： 以下商品圖片用于測(cè)試，如有侵權(quán)請(qǐng)通知，會(huì)刪除相關(guān)圖片。
js部分：
// pages/demo1/demo1.js
//存放右側(cè)分類的高度累加數(shù)組
var heightList = [];
//記錄scroll-view滾動(dòng)過程中距離頂部的高度
var distanceToTop = 0;
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
curActive: 0, //當(dāng)前選中項(xiàng)
productList: [{
c_name: '新鮮水果',
list: [{
id: 0,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '櫻桃'
},
{
id: 1,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '荔枝'
},
{
id: 2,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '荔枝'
},
{
id: 3,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '荔枝'
},
{
id: 4,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '荔枝'
},
{
id: 5,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '荔枝'
},
{
id: 6,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '荔枝'
},
{
id: 7,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '荔枝'
},
]
},
{
c_name: '海鮮水產(chǎn)',
list: [{
id: 0,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
},
{
id: 1,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
},
{
id: 2,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 3,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 4,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 5,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 6,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 7,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 8,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
},
]
},
{
c_name: '測(cè)試數(shù)據(jù)1',
list: [{
id: 0,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
},
{
id: 1,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
},
{
id: 2,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 3,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 4,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 5,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 6,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 7,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 8,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
},
]
},
{
c_name: '測(cè)試數(shù)據(jù)2',
list: [{
id: 0,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
},
{
id: 1,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
},
{
id: 2,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 3,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 4,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 5,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 6,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 7,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
}, {
id: 8,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鮑魚'
},
]
}
]
},
/**
* 左側(cè): 菜單事件
* @param {*} e
*/
selectMenu(e) {
let index = e.currentTarget.dataset.index;
this.setData({
curActive: index,
toView: "nav" + index
})
},
/**
* 獲取商品列表高度
* 計(jì)算右側(cè)商品某分類的高度
*/
getProListHeight() {
let tmpHeightList = [];
let tmpH = 0; //臨時(shí)存放每個(gè)分類的高度
// 獲取元素信息 返回一個(gè) SelectorQuery 對(duì)象實(shí)例
const query = wx.createSelectorQuery()
query.selectAll('.product').boundingClientRect()
query.exec(function (res) {
res[0].forEach((item) => {
tmpH += item.height;
// Math.floor()向下取整 【根據(jù)個(gè)人需要修改】
tmpHeightList.push(Math.floor(tmpH));
})
heightList = tmpHeightList;
console.log(heightList);
})
},
/**
* 監(jiān)聽滾動(dòng)時(shí)觸發(fā)事件
* @param {*} e
*/
scroll(e) {
if (heightList.length == 0) return;
let scrollTop = e.detail.scrollTop; //滾動(dòng)位置
let current = this.data.curActive;
console.log('scrollTop======>', scrollTop);
if (scrollTop > distanceToTop) {
//如果右側(cè) 可視區(qū)域的豎直滾動(dòng)位置 超過 當(dāng)前列表選中項(xiàng)距頂部的高度（且沒有下標(biāo)越界），則更新左側(cè)選中項(xiàng)
if ((current + 1 < heightList.length) && (scrollTop >= heightList[current])) {
this.setData({
curActive: current + 1
})
}
} else {
//如果右側(cè) 可視區(qū)域的豎直滾動(dòng)位置 小于 當(dāng)前列表選中的項(xiàng)距頂部的高度，則更新左側(cè)選中項(xiàng)
if ((current - 1 >= 0) && (scrollTop < heightList[current - 1])) {
this.setData({
curActive: current - 1
})
}
}
//更新頂部的距離
distanceToTop = scrollTop;
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function (options) {
// 獲取商品列表高度
this.getProListHeight();
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
*/
onHide: function () {},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
*/
onUnload: function () {
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
console.log('觸發(fā)下拉')
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
console.log('觸發(fā)上拉觸底')
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {}
})
然后是wxml部分：
<view class="title">商品數(shù)據(jù)聯(lián)動(dòng)</view>
<view class="box">
<view class="left">
<scroll-view scroll-y="true" scroll-with-animation="true" class="container">
<view class="menu-item {{index == curActive ? 'active' : ''}}" wx:for="{{productList}}" data-index="{{index}}" wx:key="index" bindtap="selectMenu">
{{item.c_name}}
</view>
</scroll-view>
</view>
<view class="right">
<scroll-view scroll-y="true" scroll-with-animation="true" bindscroll="scroll" scroll-into-view="{{toView}}" style="height: 100%">
<block wx:for="{{productList}}" wx:key="*this">
<!-- id：實(shí)現(xiàn)點(diǎn)擊左側(cè)某分類時(shí)，右側(cè)滾動(dòng)至相應(yīng)位置（注意：id不能以數(shù)字開頭）-->
<view id="nav{{index}}" class="product">
<view class="c_name">{{item.c_name}}</view>
<view class="goods-box">
<view class="goods-item" wx:for="{{item.list}}" wx:for-item='items' wx:key="index">
<image class="goods-img" src="{{items.img}}" mode="aspectFit"></image>
<view class="goods-name">{{items.goodsName}}</view>
</view>
</view>
</view>
</block>
<view class="bottom">到底了~沒有更多了</view>
</scroll-view>
</view>
</view>然后是css部分：
.title {
text-align: center;
margin-top: 30px;
}
.box{
width: 100%;
height: 400px;
display: flex;
}
.left {
width: 80px;
display: inline-block;
}
.right{
flex: 1;
background: #ccc;
}
.container {
width: 100%;
height: 400px;
background-color: gray;
padding: 0;
}
.menu-item {
width: 100%;
height: 50px;
border-bottom: 1px solid #000;
background-color: pink;
line-height: 50px;
text-align: center;
}
.active {
background-color: red;
}
.c_name{
width: 100%;
text-align: center;
padding-top: 20px;
}
.goods-box {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.goods-item{
width: 80px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.goods-img{
width: 50px;
}
.bottom{
width: 100%;
height: 60px;
text-align: center;
line-height: 80px;
font-size: 10px;
color: rgb(139, 135, 135);
}
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動(dòng)的文章就介紹到這了,更多相關(guān)小程序商品數(shù)據(jù)聯(lián)動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
本文匯總了解決js跨域問題的5種方法，除了最后一種使用flash解決跨域問題由于過于高端，沒有做出介紹外，其余四種都做了下總結(jié)，這里推薦給有相同需求的小伙伴。2014-12-12
JS的遞增/遞減運(yùn)算符和帶操作的賦值運(yùn)算符的等價(jià)式
JS的遞增/遞減運(yùn)算符和帶操作的賦值運(yùn)算符的等價(jià)式...2007-12-12
Javascript hasOwnProperty 方法 & in 關(guān)鍵字
hasOwnProperty :如果 object 具有指定名稱的屬性，那么方法返回 true；反之則返回 false。2008-11-11
javascript結(jié)合Cookies實(shí)現(xiàn)瀏覽記錄歷史
最近在工作當(dāng)中遇到一個(gè)問題 有個(gè)頁(yè)面需要添加一個(gè)瀏覽歷史記錄功能，具體來說就是要記錄下用戶在此網(wǎng)站的點(diǎn)擊歷史 并把它們降序排列出來（只顯示前6個(gè)瀏覽歷史而且不能重復(fù)）。2008-09-09
JS上傳圖片前實(shí)現(xiàn)圖片預(yù)覽效果的方法
這篇文章主要介紹了JS上傳圖片前實(shí)現(xiàn)圖片預(yù)覽效果的方法,涉及javascript操作圖片的技巧,需要的朋友可以參考下2015-03-03
uniapp自定義應(yīng)用退出執(zhí)行內(nèi)容實(shí)例代碼
近幾日使用uni-app開發(fā)移動(dòng)應(yīng)用APP遇到了個(gè)不常見的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義應(yīng)用退出執(zhí)行內(nèi)容的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了js仿微信搶紅包功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
JavaScript如何刪除對(duì)象的某個(gè)屬性詳析
這篇文章主要給大家介紹了關(guān)于JavaScript如何刪除對(duì)象的某個(gè)屬性的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
js對(duì)table的td進(jìn)行相同內(nèi)容合并示例詳解
正如標(biāo)題所言如何對(duì)table的td進(jìn)行相同內(nèi)容合并，下面為大家詳細(xì)介紹下使用js是如何做到的，感興趣的朋友不要錯(cuò)過2013-12-12