vue+rem custom carousel effect

The implementation of custom carousel chart using vue+rem is for your reference. The specific contents are as follows

The unit is rem for page layout. When dynamically calculating the overall width of the carousel, px needs to be converted into rem, which is quite troublesome.

The effect is as follows: If the current picture is not the first or the last picture, you can just see part of the previous and next pictures of the current picture.

The specific code is as follows

<template>
    <div class="constructionUp">
        <div class="pub-hd">
            <h2>Construction Upgrade Package</h2>
            <h3>Additional Services</h3>
        </div>
        <div id="activityDiv">
            <ul num="0" id="activityUl">
               <li class="activityLi" v-for="(v,i) in listData" :key="i" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
                    <img src="static/imgs/package/bitmap.jpg">
                    <div class="liText">
                        <p class="liTtitle">{{v.lititle}}</p>
                        <p class="liDes">1. After the start of construction, the customer, designer and project manager will conduct on-site briefing. If there are personalized project changes, the normal customer change procedures will be followed (refer to: Customer Change Notice);</p>
                        <p class="liDes">2. After the briefing, if the customer requires changes to the personalized project for some reason, in addition to bearing the cost of the personalized project, the additional transfer fee must also be paid. </p>
                         <p class="liPrice">
                            <span class="title1">Theme package price:￥</span>
                            <span class="title2">4500</span>
                            <span class="title3">Yuan</span>
                        </p>
                    </div>
                </li>
            </ul>
            <div class="pointerDiv">
                <span :class="[currantIndex ===0 ? 'active' : '', 'pointer']"></span>
                <span :class="[currantIndex ===1 ? 'active' : '', 'pointer']"></span>
                <span :class="[currantIndex ===2 ? 'active' : '', 'pointer']"></span>
            </div>
        </div>
    </div>
</template>
 
<script>
export default {
    data () {
        return {
            listData: [{lititle: 'Old house renovation'}, {lititle: 'Old house renovation 2'}, {lititle: 'Old house renovation 3'}],
            liWidth: 0,
            liNum: 0,
            startX: 0,
            endX: 0,
            currantIndex: 0,
            test: false
 
        }
    },
    mounted () {
        this.initUlWidth()
    },
    methods: {
        initUlWidth () { // Initialize the width of ul let pit = document.documentElement.clientWidth / 750 // The ratio of the current mobile phone screen to the 750 screen let oldWidth = document.getElementsByClassName('activityLi')[0].offsetWidth // The width of a single li let marginR = getComputedStyle(document.getElementsByClassName('activityLi')[0], null)['marginRight'] // Get a single marginRight, with px
            let marginNum = parseInt(marginR.replace('px', ''))
            this.liWidth = oldWidth + marginNum // single width + maringRight
            let liCount = parseInt(document.getElementsByClassName('activityLi').length)// Number of li this.liNum = liCount
            let ULpx = oldWidth * liCount + (liCount - 1) * marginNum // The last margin is not counted document.getElementById('activityUl').style.width = ULpx / pit + 'px' // Divide by the ratio to make the current div width the same as 2 times the design ratio, set the length of ul, and the last margin is not counted },
        touchStart (e) {
            // Record the initial position e.preventDefault() // Prevent default events, scrolling, etc. this.startX = e.touches[0].clientX // Record the position where the sliding starts },
        touchEnd (e) {
            e.preventDefault() // Prevent default events // Record end position this.endX = e.changedTouches[0].clientX
            // Swipe left if (this.startX - this.endX > 30) {
                console.log('Swipe left')
                if (this.currantIndex >= this.liNum - 1) {
                    // No operation } else {
                    this.currantIndex++
                    document.getElementById('activityUl').style.left = -this.currantIndex * this.liWidth + 'px'
                }
            }
            // Swipe right if (this.startX - this.endX < -30) {
                if (this.currantIndex === 0) {
                    // No operation } else {
                    this.currantIndex--
                    document.getElementById('activityUl').style.left = -this.currantIndex * this.liWidth + 'px'
                }
            }
            this.startX = 0
            this.endX = 0
        }
 
    }
}
</script>
 
<style lang="less" scoped>
    @import "~less/base.less";
    .constructionUp{
        width: 100%;
        .pub-hd{
            padding: 0.8rem 0 0.6rem 0;
            text-align: center;
            background-color: #ffffff;
            h2{
                font-size: 0.32rem;
                color: #606771;
            }
            h3{
                margin-top: 0.26rem;
                font-size: 0.24rem;
                color: #b9bec4;
            }
        }
        #activityDiv{
            padding-left: 0.4rem;
            background-color: #ffffff;
            overflow: hidden;
            #activityUl{
                position: relative;
                left: 0;
                height: 8.06rem;
                transition:all .35s ease-in-out;
                background-color: #ffffff;
                .activityLi{
                    float: left;
                    width: 6.7rem;
                    height: 8.06rem;
                    &:not(:last-child){
                        margin-right: 0.3rem;
                    }
                    box-shadow: 0 5px 25px 0 rgba(0,0,0,.4);
                    img{
                        width: 100%;
                        height: 3.6rem;
                    }
                    .liText{
                        padding: 0 0.4rem;
                        text-align: left;
                        .liTtitle{
                            padding: 0.48rem 0 0.36rem 0;
                            font-size: 0.34rem;
                            color: #000000;
                        }
                        .liDes{
                            font-size: 0.2rem;
                            color:#b5b5b5;
                        }
                    }
                    .liPrice{
                        height: 0.28rem;
                        line-height: 0.28rem;
                        color: @c-main; //Just change the color vertical-align: bottom;
                        margin-top: 0.8rem;
                        .title1{
                            display: inline-block;
                            font-size: 0.22rem;
                        }
                         .title2{
                              display: inline-block;
                              font-size: 0.35rem;
                        }
                         .title3{
                              display: inline-block;
                              font-size: 0.22rem;
                        }
                    }
                }
            }
             .pointerDiv{
                width: 100%;
                height: 1.54rem;
                background-color: #ffffff;
                display: flex;
                align-items: center;
                justify-content: center;
                .pointer{
                    display: inline-block;
                    width: 0.16rem;
                    height: 0.16rem;
                    background-color: #cccccc;
                    border-radius: 100%;
                    &:nth-child(2){
                        margin:0 0.4rem;
                    }
                    &.active{
                        background-color: @c-main;
                    }
                }
            }
        }
    }
</style>

For tutorials on vue.js components, please click on the special vue.js component learning tutorial to learn.

For more Vue learning tutorials, please read the special topic "Vue Practical Tutorial"

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: