위 챗 애플 릿 scroll-view 는 닻 점 왼쪽 네 비게 이 션 표시 줄 로 스크롤 하여 주문 하 는 기능 을 실현 합 니 다(종 류 를 클릭 하여 닻 점 으로 스크롤)
8402 단어 애플 릿scroll-view굴러가다닻 점
1.wxml 코드:
<view class="page">
<import src="../../components/catering-item/catering-item.wxml" />
<!-- -->
<view class='under_line'></view>
<view class="body">
<view style='float: left' class='left'>
<scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY' style='height: {{winHeight}}px'>
<view class='all clear'>
<block wx:key="tabs" wx:for="{{tabs}}">
<view bindtap='jumpIndex' data-menuindex='{{index}}'data-anchor='{{item.anchor}}'>
<view class="text-style {{indexId==index?' activeView':''}}">
<text class="{{indexId==index?'active1':''}}">{{item.title}}</text>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
<view class="right" style='height: {{winHeight}}px'>
<scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" bindscroll="scrollToLeft" scroll-into-view="{{toTitle}}" class='scrollRight' style='height: {{winHeight}}px'>
<block wx:key="tabs" wx:for="{{tabs}}">
<view id="view-{{item.anchor}}">
<view class="title" id="title-{{item.anchor}}">{{item.title}}</view>
<view class="orders" wx:for="{{tabsList[item.anchor]}}">
<template is="cateringItem" data="{{...item}}" />
</view>
</view>
</block>
</scroll-view>
</view>
</view>
</view>
2.wxss 코드:
@import "../../components/catering-item/catering-item.wxss";
/* pages/catering.wxss */
.page {
display: flex;
flex-direction: column;
width: 100%;
/* background: #F7F4F8; */
background-image: linear-gradient(90deg, #FCFCFC 0%, #FCFCFC 99%);
/* padding-top: 16px; */
}
.under_line{
width: 100%;
border-top: 1rpx solid #efefef;
}
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
.body{
display: flex;
width: 100%;
}
.scrollY {
width: 200rpx;
/* position: fixed;
left: 0;
top: 0; */
background: #F5F5F5;
/* border-right: 1rpx solid #efefef; */
}
/* scrollRight{
flex: 1;
} */
.right{
flex: 1;
/* height: 200rpx; */
/* background: #00FF00; */
}
.left {
border-top: 1rpx solid #efefef;
border-right: 1rpx solid #efefef;
}
.text-style {
width: 200rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 28rpx;
font-family: PingFangSC-Semibold;
color: rgba(51, 51, 51, 1);
}
.active1 {
color: #E5D1A9;
/* background: #FFF; */
}
.activeView{
background: #FFF;
}
.active {
display: block;
width: 50rpx;
height: 6rpx;
background: #E5D1A9;
position: relative;
left: 75rpx;
bottom: 30rpx;
}
.title{
margin-left: 32rpx;
padding-top: 16rpx;
font-size: 28rpx;
/* padding-bottom: 16rpx; */
}
3.js 코드
// pages/catering.js
Page({
/**
*
*/
data: {
tabs: [
{ title: ' ', anchor: 'a', },
{ title: ' ', anchor: 'b', },
{ title: ' ', anchor: 'c', },
{ title: ' ', anchor: 'd', },
{ title: ' ', anchor: 'e', },
{ title: ' ', anchor: 'f', },
],
tabsList: {
a: [{
price: 10.1, anchor: "a", index: 0, num: 0
}, {
price: 10.2, anchor: "a", index: 1, num: 0
},
{
price: 10.3, anchor: "a", index: 2, num: 0
},],
b: [{
price: 10.4, anchor: "b", index: 0, num: 0
}, {
price: 10.5, anchor: "b", index: 1, num: 0
},
{
price: 10.6, anchor: "b", index: 2, num: 0
},],
c: [{
price: 10.7, anchor: "c", index: 0, num: 0
}, {
price: 10.8, anchor: "c", index: 1, num: 0
},
{
price: 10.9, anchor: "c", index: 2, num: 0
},],
d: [{
price: 11.0, anchor: "d", index: 0, num: 0
}, {
price: 11.1, anchor: "d", index: 1, num: 0
},
{
price: 11.2, anchor: "d", index: 2, num: 0
},],
e: [{
price: 11.3, anchor: "e", index: 0, num: 0
}, {
price: 11.4, anchor: "e", index: 1, num: 0
},
{
price: 11.5, anchor: "e", index: 2, num: 0
},],
f: [{
price: 11.6, anchor: "f", index: 0, num: 0
}, {
price: 11.7, anchor: "f", index: 1, num: 0
},
{
price: 11.8, anchor: "f", index: 2, num: 0
},]
},
indexId: 0,
toTitle:"title-c",
scrollTop:0,
top:[],
},
//
jumpIndex(e) {
let index = e.currentTarget.dataset.menuindex;
let anchor = e.currentTarget.dataset.anchor;
let that = this
that.setData({
indexId: index,
toTitle: "title-" + anchor
});
//
},
scrollToLeft(res){
console.log("scrollToLeft-res:" + JSON.stringify(res) + JSON.stringify(this.data.top));
// let top=res.detail.scrollTop;
this.setData({
scrollTop: res.detail.scrollTop
})
var length = this.data.top.length;
for(var i=0;i<this.data.top.length;i++){
if (this.data.top[i] - this.data.top[0] <= this.data.scrollTop && (i < length - 1 && this.data.top[i + 1] - this.data.top[0] > this.data.scrollTop)){
if(this.data.indexId!=i){
this.setData({
indexId: i,
});
}
}
}
// console.log("top:"+top);
},
/**
* --
*/
onLoad: function (options) {
var that = this
wx.getSystemInfo({
success: function (res) {
that.setData({
winHeight: res.windowHeight
});
var top2=new Array();
for(var i=0;i<that.data.tabs.length;i++){
wx.createSelectorQuery().select('#view-' + that.data.tabs[i].anchor).boundingClientRect(function (rect) {
var isTop=Number(rect.top);
top2.push(isTop);
console.log("view-c:" + JSON.stringify(rect));
}).exec();
}
that.setData({
top: top2
});
}
});
},
})
설명:wxml 의 template 는 요리 의 item 으로 자신의 수요 에 따라 정의 할 수 있 습 니 다.
scroll-view 에 사용 되 는 scroll-into-view 속성 은 왼쪽 메뉴 의 종 류 를 클릭 하여 오른쪽 메뉴 의 구체 적 인 위 치 를 찾 습 니 다.js 의 jmpIndex 는 사용자 에 게 왼쪽 메뉴 를 클릭 하고 선택 한 위치 변경 과 오른쪽 메뉴 를 찾 습 니 다.
js 에서 scrollToLeft 는 사용자 가 오른쪽 메뉴 를 굴 리 고 왼쪽 메뉴 의 분 류 를 포 지 셔 닝 하 는 데 사 용 됩 니 다.주요 사상 은 오른쪽 메뉴 의 종류 라벨 의 top 위 치 를 기록 하 는 것 입 니 다.오른쪽 scroll-view 가 미 끄 러 지 는 위 치 는 특정한 top 보다 작 고 다음 top 보다 크 면 왼쪽 종류 메뉴 를 지정 한 위치 로 바 꾸 는 것 입 니 다.
총결산
위 챗 애플 릿 scroll-view 가 닻 점 왼쪽 네 비게 이 션 표시 줄 로 스크롤 하여 주문 하 는 기능(종류 클릭,닻 점 으로 스크롤)에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 위 챗 애플 릿 scroll-view 가 닻 점 으로 스크롤 하 는 내용 을 실현 합 니 다.예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
애플 릿 이미지 새로 고침, nginx 재 작성 url 제거 인자이전에 nginx 로 이미지 서버 를 만 들 었 는데 전단 에 작은 프로그램 을 사 용 했 습 니 다. 작은 프로그램 이 출시 된 후에 그림 이 새로 고침 되 지 않 는 것 을 발 견 했 습 니 다. 조사 한 결과 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.