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

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

二、实现方案：

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

三、程序实现

3.1 js文件

data声明变量

onload时计算参数值

3.2 wxss文件

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

3.3 wxml文件

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

四、实现效果

因为感觉用 微信开发者工具 开发很不习惯，所以都是用 WebStorm 来开发，再用 微信开发者工具 预览。本文主要记录一下利用webstorm编译less

配置方案

1、配置在当前目录生成.wxss

2、less独立文件夹，生成 .wxss 文件到指定的目录中

1、配置在当前目录生成.wxss

2、less独立文件夹，生成 .wxss 文件到指定的目录中

和微信步骤一样，只是后缀不同

路径 File | Settings | Tools | File Watchers | +

点加号，选择less, d出下面的窗口，已经有默认配置了，点ok即可