current position:Home>Applet foundation view container scroll view
Applet foundation view container scroll view
2021-08-27 09:05:37 【An Xiaoxuan】
This is my participation 8 The fourth of the yuegengwen challenge 3 God , Check out the activity details :8 Yuegengwen challenge
Here's the picture , To achieve imitation keep A sliding rotation chart that can switch the total time dimension of day, week and month , The selection effect of the last data is displayed by default , Paging display , Slide left to show the data of historical date . It looks cool , There are also many difficulties in the implementation process , Make a note of , Consider the past you shall know the future !
The first time I saw this UI chart When , I don't think it's complicated , But there are still many difficulties in the later implementation . First of all, the time dimension should slide left and right , The second is the sliding of the column , The most difficult point is that the paging order is different from that in the past , This is in reverse order , The latest date is shown on the first page , As shown in the figure below
1. Time selection dimension
1.1 Parent component wxml
- swiper Switch and click the time dimension
- van-tabs Of active Achieve the selection effect
- Introduce sliding components , Father and son pass on value
<!-- Time dimension switching -->
<view class="record-bg">
<view class="exe-name" bindtap="showPick">
<text class="txt-overflow">{{exeName}}</text>
<text class="iconfont iconzhankai"></text>
</view>
<van-tabs active="{{active}}" bind:change="onChange" data-flag="0">
<van-tab title=" Japan "></van-tab>
<van-tab title=" Zhou "></van-tab>
<van-tab title=" month "></van-tab>
<van-tab title=" total "></van-tab>
</van-tabs>
</view>
<!-- Introduce sliding components -->
<slide-bar-chart chartData="{{chartYData}}" xName="name" yName="data" bindcurrentBarChange="currentBarChange" chartAllData="{{chartData}}" pageSize="{{pageSize}}" isFirst="{{isLineFirst}}" active="{{active}}">
/slide-bar-chart>
Copy code
1.2 Sliding components wxml
- utilize scroll-view Horizontal scrolling scroll-left
- Of a pillar padding-left Achieve the selection effect
<view class='slide-content'>
<scroll-view bindscroll="chartScroll" scroll-x scroll-left="{{moveScroll}}" bindtouchstart='clickStart'
refresher-background="#4C4948" refresher-default-style="none" refresher-enabled="{{false}}">
<view class='slide-charts' style='padding-left:{{chartLeft}}px;width:{{chartWidth}}px'>
<view class='slide-item' wx:for="{{chartData}}" wx:key="index" bindtap="clickItem" data-index="{{index}}">
<view class="slide-item-content {{index == nowIndex - 1 ?'slide-bar-active' : '' }}">
<view class="slide-bar-content " style='height:{{item[yName]*10}}rpx'></view>
<view class='slide-number' hidden='{{!nowIndex}}'>
<block>{{item[xName]}}</block>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
Copy code
1.3 The style of the sliding component
::-webkit-scrollbar {
display: none;
}
.slide-content {
transform: rotate(180deg);
background: #4C4948;
height: 562rpx;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
.slide-content scroll-view {
width: 100%;
height: 100%;
white-space: nowrap;
}
.slide-charts {
height: 100%;
transition: all 1s;
overflow-x: scroll;
overflow-y: hidden;
display: flex;
}
.slide-item {
display: inline-block;
height: 100%;
text-align: center;
width: 150rpx;
position: relative;
display: flex;
align-items: flex-end;
}
.slide-item::after {
content: "";
position: absolute;
bottom: 0;
height: 88%;
width: 2rpx;
left: 50%;
z-index: -1;
background: rgba(255, 255, 255, 0.1);
}
.slide-item-content {
transform: rotate(180deg);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
width: 150rpx;
height: 530rpx;
color: rgba(255, 255, 255, 0.5);
}
/* Default column style */
.slide-bar-content {
background: #FB8337;
width: 40rpx;
z-index: 5;
border-radius: 8rpx;
margin-top: 24rpx;
}
.slide-number {
font-size: 20rpx;
color: rgba(255, 255, 255, 0.4);
text-align: center;
line-height: 24rpx;
margin-top: 14rpx;
}
.slide-bar-active .slide-bar-content {
background: #FFB687;
}
.slide-bar-active .slide-number {
font-size: 23.5rpx;
color: #ffffff;
}
.chart-bottom {
width: 100%;
position: relative;
}
.chart-bottom:after {
content: "";
position: absolute;
left: 50%;
top: -28rpx;
margin-left: -8rpx;
border-color: transparent transparent #fff transparent;
border-style: solid;
border-width: 16rpx;
}
Copy code
2. Sliding components scroll-view
- Calculate the width of the screen , According to the column width , Calculate the column spacing
- Select the last one right in the middle of the screen
- Sliding events , Start , The process , end
- Slip end , To trigger a callback to determine whether the next page needs to be loaded , And pass the value to the parent component
- Click on a single column , Get the of the column index, Achieve the selection effect
// Slide assembly initialization
initialization() {
let self = this
setTimeout(() => {
wx.createSelectorQuery().in(this).selectAll('.slide-item-content').boundingClientRect(function (rects) {
// obtain bar Actual width of
wx.getSystemInfo({
success: function (res) {
if (!rects.length) {
return;
}
let chartLeft = (res.windowWidth - rects[0].width) / 2; // padding-left
self.setData({
chartLeft: chartLeft,
chartWidth: (self.data.chartData.length - 0.5) * rects[0].width + res.windowWidth / 2, // chart Width
pageNumAll: Math.ceil(self.data.chartAllData.length / self.data.pageSize), // Total number of pages math The function returns an integer
})
// The last one is right in the middle
setTimeout(() => {
if (self.data.isFirst) {
self.setData({
// Scroll to the last timeline
moveScroll: 0, // 300
nowIndex: 1,
barWidth: rects[0].width,
windowWidth: res.windowWidth,
isFirst: false,
pageNum: 1,
})
}
}, 500)
}
})
}).exec()
}, 0)
},
// Slide start
clickStart(e) {
// Prevent false touch
this.setData({
isTouch: true
})
},
// Sliding process
chartScroll(e) {
clearTimeout(this.data.scrollTimeout)
if (this.data.isTouch) {
this.setData({
scrollX: e.detail.scrollLeft
})
// Throttling function , When sliding stops 100 Execution end event in milliseconds
// because ios There is inertial sliding at the bottom , You can't just touchend event
this.setData({
scrollTimeout: setTimeout(() => {
this.clickEnd()
}, 100)
})
}
},
// Slip end
clickEnd() {
// console.log(' Slip end ')
let nowIndex = Math.round(this.data.scrollX / this.data.barWidth + 1);
this.setData({
nowIndex: nowIndex,
moveScroll: this.data.barWidth * (nowIndex - 1),
isTouch: false
})
if (this.data.pageNumAll >= this.data.pageNum) {
let eIndex = (this.data.pageNum - 1) * this.data.pageSize + this.data.pageSize - 1;
if (this.data.chartData.length < eIndex) {
eIndex = this.data.chartData.length - 1;
}
if ((nowIndex - 1 == eIndex) && (this.data.pageNum < this.data.pageNumAll)) {
let num = this.data.pageNum + 1;
this.setData({
pageNum: num,
})
}
this.triggerEvent('currentBarChange', {
nowItem: this.data.chartData[nowIndex - 1],
pageNum: this.data.pageNum,
allPage: this.data.pageNumAll,
})
}
},
// Click on a single column
clickItem(e) {
let nowIndex = e.currentTarget.dataset.index + 1;
if (nowIndex == this.data.nowIndex) {
return;
}
if (nowIndex) {
this.setData({
nowIndex: nowIndex,
moveScroll: this.data.barWidth * (nowIndex - 1),
isTouch: false
})
if (this.data.pageNumAll >= this.data.pageNum) {
let eIndex = (this.data.pageNum - 1) * this.data.pageSize + this.data.pageSize - 1;
if (this.data.chartData.length < eIndex) {
eIndex = this.data.chartData.length - 1;
}
if ((nowIndex - 1 == eIndex) && (this.data.pageNum < this.data.pageNumAll)) {
let num = this.data.pageNum + 1;
this.setData({
pageNum: num,
})
}
this.triggerEvent('currentBarChange', {
nowItem: this.data.chartData[nowIndex - 1],
pageNum: this.data.pageNum,
allPage: this.data.pageNumAll,
})
}
}
},
Copy code
This is all the code for the sliding component , One of the difficulties , stay ios On , After scrolling, it will return to the original position , This problem has been puzzling for a long time , Finally, it is found that it is good to remove this attribute scroll-with-animation, The original meaning is Use animated transitions when setting scroll bar positions , All in all , Make a note of . Thank you for watching .
copyright notice
author[An Xiaoxuan],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827090534215z.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich