根据list集合判断是否有禁止轮播滚动事件 (85741afe) | Commits | w-front-end / select_good

Browse Code »

Commit 85741afe7bc4b9fb2195f30bd3e863728f3b5ac9

Authored by zhiyangdu 2020-04-02 13:33:25 +0800

1 parent 05d58419

根据list集合判断是否有禁止轮播滚动事件

Inline Side-by-side

Showing 2 changed files with 79 additions and 88 deletions

src/components/swiper/swiper.less

View file @85741af

  @charset "UTF-8";
  .swiper-box {
--	position: relative;
--	width: 750px;
--	height: 380px;
--	overflow: hidden;
--	.swipe {
--		margin: 0 auto;
--		width: 690px;
--		height: 100%;
--		.swipe-item {
--			width: 100%;
--			height: 100%;
--		}
--		/deep/ .van-swipe__indicators {
--			left: unset;
--			right: 26px;
--			bottom: 20px;
--			.van-swipe__indicator {
--				background-color: rgba(255, 255, 255, 0.5);
--				width: 8px;
--				height: 8px;
--				margin: 0 4px;
--				opacity: unset;
--				border-radius: 50%;
--				&.van-swipe__indicator--active {
--                    background:rgba(252,21,65,1);
--					width: 16px;
--					border-radius: 4px;
--				}
--			}
--		}
--	}
--}
--.item {
--    display: flex;
--    justify-content: center;
--    align-items: center;
--    width: 100%;
--    height: 100%;
--    border-radius: 16px;
++    position: relative;
++    width: 750px;
++    height: 380px;
      overflow: hidden;
--    .img-box {
--        .img {
--            display: block;
++    .swipe {
++        margin: 0 auto;
++        width: 690px;
++        height: 100%;
++        .swipe-item {
              width: 100%;
--            height: auto;
--            border-radius: 16px;
--            overflow: hidden;
++            height: 100%;
++            .item {
++                display: flex;
++                justify-content: center;
++                align-items: center;
++                width: 100%;
++                height: 100%;
++                border-radius: 16px;
++                overflow: hidden;
++                .img-box {
++                    .img {
++                        display: block;
++                        width: 100%;
++                        height: auto;
++                        border-radius: 16px;
++                        overflow: hidden;
++                    }
++                }
++            }
++        }
++        /deep/ .van-swipe__indicators {
++            left: unset;
++            right: 26px;
++            bottom: 20px;
++            .van-swipe__indicator {
++                background-color: rgba(255, 255, 255, 0.5);
++                width: 8px;
++                height: 8px;
++                margin: 0 4px;
++                opacity: unset;
++                border-radius: 50%;
++                &.van-swipe__indicator--active {
++                    background:rgba(252,21,65,1);
++                    width: 16px;
++                    border-radius: 4px;
++                }
++            }
          }
      }
  }

src/components/swiper/swiper.vue

View file @85741af

  <template>
--	<div class="swiper-box" v-if="swipers  && swipers.length">
--        <!--swipers.length长度大于1的时候显示轮播-->
--		<swipe v-show="swipers.length>1" class="swipe" :autoplay="5000" :show-indicators="swipers.showIndicators ? swipers.showIndicators : showIndicators" @change="onChange">
--			<swipe-item class="swipe-item" v-for="(item, index) in swipers" :key="index">
--				<div class="item" @click="$parent.$parent.gotoDetail(item)">
--					<div class="img-box">
--						<img v-lazy="item.simg + SIGN.BIG" class="img" mode="widthFix" />
--					</div>
--				</div>
--			</swipe-item>
--		</swipe>
--        <!--swipers.length=1的时候-->
--        <div v-show="swipers.length==1" class="swipe">
--        <div class="item" @click="$parent.$parent.gotoDetail(swipers[0])">
--            <div class="img-box">
--                <img v-lazy="swipers[0].simg + SIGN.BIG" class="img" mode="widthFix" />
--            </div>
--        </div>
--        </div>
--	</div>
++    <div class="swiper-box" v-if="swipers  && swipers.length">
++        <swipe class="swipe" :autoplay="5000" :touchable="swipers.length===1 ? false : true" :show-indicators="swipers.showIndicators ? swipers.showIndicators : showIndicators" @change="onChange">
++            <swipe-item class="swipe-item" v-for="(item, index) in swipers" :key="index">
++                <div class="item" @click="$parent.$parent.gotoDetail(item)">
++                    <div class="img-box">
++                        <img v-lazy="item.simg + SIGN.BIG" class="img" mode="widthFix" />
++                    </div>
++                </div>
++            </swipe-item>
++        </swipe>
++    </div>
  </template>
  <script>
--	// 引入组件
--	// import { Swipe, SwipeItem } from 'mint-ui';
--	import { Swipe, SwipeItem } from "vant";
++    // 引入组件
++    // import { Swipe, SwipeItem } from 'mint-ui';
++    import { Swipe, SwipeItem } from "vant";
--	export default {
--		data() {
--			return {
--				showIndicators: true
--			}
--		},
--		props: ["swipers"],
--		components: {
--			Swipe,
++    export default {
++        data() {
++            return {
++                showIndicators: true,
++            }
++        },
++        props: ["swipers"],
++        components: {
++            Swipe,
              SwipeItem
--		},
--		methods: {
--			/**
--			 * 当swiper切换
--			 * @param {int} index [切换swiper索引]
--			 */
--			onChange(index) {
--				this.$emit("onChange", index);
--			}
--		}
--	}
++        },
++        methods: {
++            /**
++             * 当swiper切换
++             * @param {int} index [切换swiper索引]
++             */
++            onChange(index) {
++                this.$emit("onChange", index);
++            }
++        }
++    }
  </script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->

w-front-end / select_good · Commits

GitLab

根据list集合判断是否有禁止轮播滚动事件