如何实现横向滑动以及文字长度超过盒子长度时用...代替的实现Vue、css

滑动效果

在实际开发过程中我们会遇到从右往左的滑动效果还不是从上到下的滑动效果，比如：

 那么这种效果是怎么实现的呢直接上代码

html部分:

<template>
    <view class="top">
        <view class="content">
            <view class="address-selection-box">
                <view class="selection-text">
                    选择门店
                </view>
                <image src="/static/cha.png" mode="aspectFit"
                    style="  width: 35rpx; height: 35rpx; top: 1044rpx; right: 70rpx; position: fixed;"></image>
            </view>
            <view class="content_items" v-for="(item,index) in store_list" :key="index"
                :class="active_index == index ? 'active' : ''" @click="handleItem(item,index)">
                <view class="" style="display: flex;align-items: center;">
                    <view style="width: 300rpx; height: 220rpx; margin: -16rpx 0 0 20rpx;">
                        <image :src="item.img" mode="aspectFill"
                            style="width: 300rpx; height: 220rpx; border-radius: 10rpx;"></image>
                    </view>
                    <view class=""
                        style="    display: flex;flex-direction: column;margin: -100rpx 0 0 36rpx;width: auto; height:370rpx;justify-content: flex-end;">
                        <text
                            style="font-weight: bold; width: 330rpx; margin-bottom: 10rpx; font-size: 32rpx;">{{ item.name }}</text>
                        <view class="content_items_address">{{ item.address }}</view>
                        <view class="content_items_info">
                            <text>{{ item.distance }}</text>
                        </view>
                    </view>

                </view>

            </view>
        </view>
        <view class="footer">
            <view class="footer_btn" @click="changeStore">切换门店</view>
        </view>
    </view>
</template>

script部分:

<script>
    export default {
        onLoad() {
            this.getActiveIndex()

        },
        computed: {
            store_list() {
                return this.$Common.getStoreList()
            },
            now_store() {
                return this.$Common.getStore()
            }
        },
        data() {
            return {
                store_list: [{
                        name: '11223344我是我是我是我是我是我是我是我是我是我是我是我是',
                        distance: '662.7km',
                        address: '112233445566778899',
                        img: '/static/jiudian.jpg'
                    },
                    {
                        name: '11223344',
                        distance: '662.7km',
                        address: '112233445566778899',
                        img: '/static/jiudian.jpg'
                    },
                    {
                        name: '11223344',
                        distance: '662.7km',
                        address: '112233445566778899',
                        img: '/static/jiudian.jpg'
                    },
                    {
                        name: '11223344',
                        distance: '662.7km',
                        address: '112233445566778899',
                        img: '/static/jiudian.jpg'
                    },
                    {
                        name: '11223344',
                        distance: '662.7km',
                        address: '112233445566778899',
                        img: '/static/jiudian.jpg'
                    },
                    {
                        name: '11223344',
                        distance: '662.7km',
                        address: '112233445566778899',
                        img: '/static/jiudian.jpg'
                    },

                ],
                active_index: 0,
                picker_item: {}
            };
        },
        methods: {
            // // 获取当前选中的门店下标
            // getActiveIndex() {
            //     let active_index
            //     this.store_list.forEach((item, index) => {
            //         if (item.id == this.now_store.id) active_index = index
            //     });
            //     this.active_index = active_index < 0 ? 0 : active_index
            // },
            // handleItem(item, index) {
            //     this.active_index = index
            //     this.picker_item = item
            // },
            // changeStore() {
            //     let {
            //         id,
            //         name
            //     } = this.picker_item
            //     this.$Common.setStore(id, name)
            //     uni.showToast({
            //         title: '切换成功!',
            //         icon: 'none'
            //     })

            //     setTimeout(() => {
            //         uni.navigateBack()
            //     }, 500)
            // }
        }
    }
</script>

css部分：

<style lang="scss">
    page {
        background-color: #FAFBFD;
    }

    .top {
        width: 100%;
        height: 100vh;
        // background-color: #F9DF4C;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .content {
        // padding: 0 30rpx;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        white-space: nowrap;
        align-items: flex-end;
        overflow-y: hidden;
        overflow-x: scroll;
        width: 100%;
        height: 450rpx;
        background-color: #f6f6f6;
        border-radius: 10rpx;
        margin-top: 807rpx;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .content_items {
        width: 668rpx;
        height: 250rpx;
        border: 2rpx solid black;
        border-radius: 10rpx;
        margin: 0 0 60rpx 22rpx;
        background-color: #ffffff;
    }

    .content_items_info {
        float: right;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 120rpx;
        height: 120rpx;
        // background-color: #fff;
        margin-right: 220rpx;
        font-family: 苹方-简;
        margin-top: 28rpx;
    }

    .footer {
        box-sizing: border-box;
        position: fixed;
        left: 0;
        bottom: 0;
        padding: 30rpx 30rpx 0;
        width: 100%;
        height: 230rpx;
        background-color: #fff;

        &_btn {
            width: 100%;
            height: 100rpx;
            text-align: center;
            line-height: 100rpx;
            background-color: #F9DF4C;
            font-weight: bold;
            color: #23232D;
        }
    }

    .content_items_address {
        width: 300rpx;
        height: 65rpx;
        white-space: normal;
        overflow-y: hidden;
        overflow-x: scroll;
        margin: 0 0 -13rpx 0rpx;
        text-overflow: ellipsis;
        font-size: 24rpx;
        color: #d1d1d1;
        font-family: 苹方-简;
    }

    .address-selection-box {
        position: absolute;
        width: 100%;
        height: 100rpx;
        top: 20rpx;
        display: flex;

    }

    .selection-text {
        position: fixed;
        width: auto;
        height: 80rpx;
        font-size: 40rpx;
        font-family: 苹果-简;
        font-weight: 500;
        margin: 20rpx 0 0 40rpx;
    }
</style>

关键部分：

需要注意的是overflow-y一定要是hidden不然的话运行的时候竖着的方向会有滑动条哦

运行效果如视频阿里云：

https://picture-warehouseone.oss-cn-beijing.aliyuncs.com/uview%20-%20%E5%BE%AE%E4%BF%A1%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7%20Stable%20v1.06.2306020%202023-08-07%2010-01-06.mp4

文字超出盒子省略号代替

如何我们遇到文字大于盒子的时候需要超出的部分用省略号代替的时候只需在这个选择题下面添加这些属性即可。

 效果：

如果需要文字输入三行在省略的话，首先要盒子高度能放的下三行文字在-webkit-line-clamp：3即可，一行就是-webkit-line-clamp：1、n行就是-webkit-line-clamp：n，前提是盒子高度能够装得下n行文字。