zoukankan      html  css  js  c++  java
  • 动态渲染style 背景图片

    前言

    最近小程序项目需要一个 弹框 展示 轮播图 。项目用的 mpvue 框架,使用 colorUi 的轮播图时,

              
              <swiper
                class="card-swiper round-dot"
                indicator-dots="true"
                circular="true"
                autoplay="true"
                interval="5000"
                duration="500"
                bindchange="cardSwiper"
                indicator-color="#8799a3"
                indicator-active-color="#0081ff"
              >
                <swiper-item
                  v-for="(i,index) in 3"
                  :key="index"
                  class="cur"
                >
                   <view
                    class="bg-img shadow-blur"
                    style="background-image:url(https://image.weilanwl.com/img/4x3-{{index+1}}.jpg)"
                  ></view> 
                </swiper-item>
              </swiper>

    不支持 {{ }} 的语法。报错

      - style="background-image:url(https://image.weilanwl.com/img/4x3-{{index+1}}.jpg)": Interpolation inside attributes has been removed. 
    Use v-bind or the colon shorthand instead. For example, instead of <div style="{{ val }}">, use <div :style="val">.

    方案

    修改为:

              <swiper
                class="card-swiper round-dot"
                indicator-dots="true"
                circular="true"
                autoplay="true"
                interval="5000"
                duration="500"
                bindchange="cardSwiper"
                indicator-color="#8799a3"
                indicator-active-color="#0081ff"
              >
                <swiper-item
                  v-for="(i,index) in bagImg"
                  :key="index"
                  class="cur"
                >
                  
                   <view
                    class="bg-img shadow-blur"
                    :style="{backgroundImage:'url('+i+')'}"
                  ></view>
                </swiper-item>
              </swiper>                        
     <script>
        export default{
            data(){
                return{
                   bagImg:[
                      "https://image.weilanwl.com/img/4x3-1.jpg",
                      "https://image.weilanwl.com/img/4x3-2.jpg",
                      "https://image.weilanwl.com/img/4x3-3.jpg",
                   ]
                }
            }
        }
    </script>

    效果

  • 相关阅读:
    pm2进阶使用
    javascript装饰器模式
    pupeteer初体验
    重构:从Promise到Async/Await
    # electron-vue 尝试做个网易云音乐
    Kafka监控:主要性能指标
    生产环境Rabbitmq集群安装部署与配置
    Java同步块(synchronized block)
    RabbitMQ高可用镜像队列
    kafka-0.9消费者新API
  • 原文地址:https://www.cnblogs.com/lpp-11-15/p/12912158.html
Copyright © 2011-2022 走看看