小さなプログラムは、ステップバイステップで、達成するために同様の空腹の持ち帰りページのダブルリンケージ効果を達成するために、すべてのボディが来て
データを取得
Vueであれ、Reactであれ、あるいは小さなプログラムであれ、データドリブンという特徴があることを覚えておいてください。
module.exports = [
{
title: "コンピュータのオフィス"
list: [
{
id: 1,
url: 'https://.//index/.png',
goodsName: 'ピギーマン
},
{
id: 1,
url: 'https://.//index/.png',
goodsName: 'モバイルの
},
{
id: 1,
url: 'https://.//index/.png',
goodsName: '何'
},
]
}
]
//イメージの失敗が自分自身を見つけるために、自分自身を貼り付け、分類データがより多くなければならない、画面未満を占め、再生することはできません！
//10
レイアウト
左右のレイアウトにはエラスティック・ボックスをお勧めします。
<view class="wrap">
<view class="left">
<block wx:for="{{listData}}" wx:key="index">
<view class="item" style="background:{{active===index?'red':''}}" bindtap="setBoxId" data-index="{{index}}">{{item.c_name}}</view>
</block>
</view>
<view class="right">
<scroll-view scroll-y="{{true}}" style="height:500px;" scroll-into-view="{{currentId}}" scroll-with-animation="{{true}}" bindscroll="getScroll">
<view class="scroll-wrap">
<block wx:for="{{listData}}" wx:key="index">
<view class="title" id="box{{index}}" style="background:red;">{{item.c_name}}</view>
<block wx:for="{{item.list}}" wx:for-item="itm" wx:for-index="idx" wx:key="idx">
<image src="{{itm.url}}" style="width:100px;height:100px"></image>
<view>{{itm.goodsName}}</view>
</block>
</block>
</view>
</scroll-view>
</view>
</view>
<style>
.wrap{
display: flex;
}
.wrap .left{
flex-basis:200rpx;/*固定幅を設定する*/
width: 200rpx;
}
.wrap .right{
flex:1;
}
</style>
ロジック
トップ、距離からすべてのタイトルの距離を取得し、右のリストの合計の高さは、配列の最後にプッシュし、スライドでは、その間隔で現在のスクロールのとき
//index.js
//アプリケーションの例を取得する
const app = getApp()
const listData = require("../../utils/mock") //データ取得
Page({
data: {
listData,
currentId: "box0",
active: 0,
nodeTops: []
},
onReady(){
//セレクタコンテキストを作成する
var query = wx.createSelectorQuery();
var nodeTops = [];
query.selectAll(".title").boundingClientRect((nodes)=>{
nodes.map((res)=>{
nodeTops.push(Math.round(res.top));
})
}).select(".scroll-wrap").boundingClientRect((res)=>{
nodeTops.push(Math.round(res.height));
this.setData({nodeTops});
}).exec();
},
setBoxId(e){
var index = e.target.dataset.index;
var currentId = this.data.currentId;
currentId = "box"+index;
this.setData({currentId});
},
getScroll(e){
var scrollTop = e.detail.scrollTop;
var nodeTops = this.data.nodeTops;
//
var active = nodeTops.findIndex((item,index)=>{
return scrollTop>=nodeTops[index]&&scrollTop<nodeTops[index+1];
})
this.setData({active:active>0?active:0})
//
for(var i=0;i<nodeTops.length;i++){
var val1 = nodeTops[i];
var val2 = nodeTops[i+1];
if(scrollTop>=val1&&scrollTop<val2){
this.setData({active:i>0?i:0})
}
}
}
})
