微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動效果
更新時間：2022年08月03日 14:17:09 作者：只會cv的小前端
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動效果，代碼很簡單，直接復制即可根據(jù)自己的需求去修改，對小程序商品數(shù)據(jù)聯(lián)動實例代碼感興趣的朋友一起看看吧
微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動
直接復制代碼更改可以看出效果，然后根據(jù)自己想要進行調(diào)整
注： 以下商品圖片用于測試，如有侵權(quán)請通知，會刪除相關圖片。
js部分：
// pages/demo1/demo1.js
//存放右側(cè)分類的高度累加數(shù)組
var heightList = [];
//記錄scroll-view滾動過程中距離頂部的高度
var distanceToTop = 0;
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
curActive: 0, //當前選中項
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: '測試數(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: '測試數(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
})
},
/**
* 獲取商品列表高度
* 計算右側(cè)商品某分類的高度
*/
getProListHeight() {
let tmpHeightList = [];
let tmpH = 0; //臨時存放每個分類的高度
// 獲取元素信息 返回一個 SelectorQuery 對象實例
const query = wx.createSelectorQuery()
query.selectAll('.product').boundingClientRect()
query.exec(function (res) {
res[0].forEach((item) => {
tmpH += item.height;
// Math.floor()向下取整 【根據(jù)個人需要修改】
tmpHeightList.push(Math.floor(tmpH));
})
heightList = tmpHeightList;
console.log(heightList);
})
},
/**
* 監(jiān)聽滾動時觸發(fā)事件
* @param {*} e
*/
scroll(e) {
if (heightList.length == 0) return;
let scrollTop = e.detail.scrollTop; //滾動位置
let current = this.data.curActive;
console.log('scrollTop======>', scrollTop);
if (scrollTop > distanceToTop) {
//如果右側(cè) 可視區(qū)域的豎直滾動位置 超過 當前列表選中項距頂部的高度（且沒有下標越界），則更新左側(cè)選中項
if ((current + 1 < heightList.length) && (scrollTop >= heightList[current])) {
this.setData({
curActive: current + 1
})
}
} else {
//如果右側(cè) 可視區(qū)域的豎直滾動位置 小于 當前列表選中的項距頂部的高度，則更新左側(cè)選中項
if ((current - 1 >= 0) && (scrollTop < heightList[current - 1])) {
this.setData({
curActive: current - 1
})
}
}
//更新頂部的距離
distanceToTop = scrollTop;
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
// 獲取商品列表高度
this.getProListHeight();
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
console.log('觸發(fā)下拉')
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
console.log('觸發(fā)上拉觸底')
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {}
})
然后是wxml部分：
<view class="title">商品數(shù)據(jù)聯(lián)動</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：實現(xiàn)點擊左側(cè)某分類時，右側(cè)滾動至相應位置（注意：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);
}
到此這篇關于微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動的文章就介紹到這了,更多相關小程序商品數(shù)據(jù)聯(lián)動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)滾動條自動滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
本文匯總了解決js跨域問題的5種方法，除了最后一種使用flash解決跨域問題由于過于高端，沒有做出介紹外，其余四種都做了下總結(jié)，這里推薦給有相同需求的小伙伴。2014-12-12
JS的遞增/遞減運算符和帶操作的賦值運算符的等價式...2007-12-12
Javascript hasOwnProperty 方法 & in 關鍵字
hasOwnProperty :如果 object 具有指定名稱的屬性，那么方法返回 true；反之則返回 false。2008-11-11
javascript結(jié)合Cookies實現(xiàn)瀏覽記錄歷史
最近在工作當中遇到一個問題 有個頁面需要添加一個瀏覽歷史記錄功能，具體來說就是要記錄下用戶在此網(wǎng)站的點擊歷史 并把它們降序排列出來（只顯示前6個瀏覽歷史而且不能重復）。2008-09-09
這篇文章主要介紹了JS上傳圖片前實現(xiàn)圖片預覽效果的方法,涉及javascript操作圖片的技巧,需要的朋友可以參考下2015-03-03
uniapp自定義應用退出執(zhí)行內(nèi)容實例代碼
近幾日使用uni-app開發(fā)移動應用APP遇到了個不常見的需求,下面這篇文章主要給大家介紹了關于uniapp自定義應用退出執(zhí)行內(nèi)容的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了js仿微信搶紅包功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要給大家介紹了關于JavaScript如何刪除對象的某個屬性的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
正如標題所言如何對table的td進行相同內(nèi)容合并，下面為大家詳細介紹下使用js是如何做到的，感興趣的朋友不要錯過2013-12-12