2022-11-23 工作记录--Swiper/CSS-改变swiper滑动方向 + 修改文字的方向——解决 swiper反方向滑动时，超出一行省略号处理的文字也呈反方向

【1】Swiper-改变swiper滑动方向

一、从左往右滑动（默认）⭐️

在swiper-container的div上加dir="ltr"，即 left to right。

但从视觉上，我总觉得是从右往左，哈哈哈😄

二、从右往左滑动 ⭐️

在swiper-container的div上加dir="rtl"，即 right to left。

但从视觉上，我总觉得是从左往右，哈哈哈😄

三、举例🌰

1、实现效果 🐰

上面一行是swiper默认滑动方向，下面一行是swiper反滑动方向~

2、实现代码 🥕

【补充】 react-swiper6的使用方法 可查看我的另一篇博文哦~

pop_fortune_package.jsx

'use strict';

import React from 'react';
import { observer } from 'mobx-react';
import { Swiper, SwiperSlide } from "swiper/react"; // 引入swiper,实现轮播
import 'style-loader!css-loader!swiper/swiper-bundle.css'; // 引入swiper的css

import './pop_fortune_package.less';

@observer
class Pop_fortune_package extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const prizesList = Array(5).fill('');
    return (
      <div className="pop_fortune_package">
        {
          prizesList?.length > 0 &&
          // swiper默认滑动方向
          <Swiper
            className="commonPrizes prizes_top"
            slidesPerView={3.5}
            slidesPerGroup={1}
            speed={1500}
            freeMode={true}
            loop={true}
            autoplay={{
              delay: 0,
              disableOnInteraction: false,
            }}
            spaceBetween={14}
          >
            {
              prizesList?.map((item, index) => {
                return (
                  <SwiperSlide className="prize_item" key={index}>
                    <div className="prize_img_bg">
                      <div className="prizeImg">
                        <img src={RES_PATH+'common/avatar.png'} alt="" />
                      </div>
                    </div>
                    {/* text-hidden-ellipsis: 超出一行省略号处理 */}
                    <span className="prize_name text-hidden-ellipsis">奖品名称</span>
                  </SwiperSlide>
                )
              })
            }
          </Swiper>
        }
        {
          prizesList?.length > 0 &&
          // swiper反滑动方向
          <Swiper
            className="commonPrizes prizes_bottom"
            slidesPerView={3.5}
            slidesPerGroup={1}
            speed={1500}
            freeMode={true}
            loop={true}
            autoplay={{
              delay: 0,
              disableOnInteraction: false,
            }}
            spaceBetween={14}
            // 设置swiper滑动方向为默认方向的反方向
            dir="rtl"
          >
            {
              prizesList?.map((item, index) => {
                return (
                  <SwiperSlide className="prize_item" key={index}>
                    <div className="prize_img_bg">
                      <div className="prizeImg">
                        <img src={RES_PATH+'common/avatar.png'} alt="" />
                      </div>
                    </div>
                    {/* text-hidden-ellipsis: 超出一行省略号处理 */}
                    <span className="prize_name text-hidden-ellipsis">奖品名称奖品名称</span>
                  </SwiperSlide>
                )
              })
            }
          </Swiper>
        }
        <span className="sub_title"></span>
        <span className="title"></span>
      </div>
    );
  }
}
export default Pop_fortune_package;

【2】修改文字的方向——解决 swiper反方向滑动时，超出一行省略号处理的文字也呈反方向

一、前言

如上述，设置swiper反方向滑动时，发现 处理成 “超出一行省略号” 的文字：

• 未超出一行时，文字内容不会呈反方向；
• 超出一行时，文字内容就会呈反方向，如下 👇🏻

• 理想结果✅ 是：“奖品名称奖...”
  
• 实际结果❎ 是：“...称奖品名称”
  

二、解决方法

给 “超出一行省略号” 的文字加上样式direction: ltr;，如下：👇🏻

/** 文字展示固定宽度，超出省略号展示 */
.text-hidden-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /** 让文字从左往右展示 */
  direction: ltr;
}