美文网首页程序员
微信小程序之wxss文件使用变量动态计算参数值

微信小程序之wxss文件使用变量动态计算参数值

作者: 四十年陈 | 来源:发表于2021-01-31 21:32 被阅读0次

    一、需求:

    swiper组件缩小后需要完全居中。

    二、实现方案:

    一种方式是flex居中,但我调试后效果不行;还有一种就是绝对定位,使用left 50%,这种我调试也不居中;还有一种就是计算屏幕宽度和swiper宽度,绝对定位后left=(屏幕width-swiper width)/2,本文介绍最后一种实现方式。

    三、程序实现

    3.1 js文件

    data声明变量

    声明变量

    onload时计算参数值

    计算参数值

    3.2 wxss文件

    使用绝对定位,left使用变量,格式: var( --变量名--)

    wxss

    3.3 wxml文件

    swiper外用一个view组件,并使用变量,格式:style="--left--:{{动态变量}}px"

    wxml

    四、实现效果

    居中效果

    相关文章

      网友评论

        本文标题:微信小程序之wxss文件使用变量动态计算参数值

        本文链接:https://www.haomeiwen.com/subject/wafdtltx.html