Applet foundation view container scroll view

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

1. swiper Switch and click the time dimension
2. van-tabs Of active Achieve the selection effect
3. 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

1. utilize scroll-view Horizontal scrolling scroll-left
2. 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

1. Calculate the width of the screen , According to the column width , Calculate the column spacing
2. Select the last one right in the middle of the screen
3. Sliding events , Start , The process , end
4. Slip end , To trigger a callback to determine whether the next page needs to be loaded , And pass the value to the parent component
5. 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 .