这段代码在不同的手机型号下会有很大出入 【官方帮忙看下】
发布于 7 年前 作者 fhuang 4988 次浏览 来自 问答

<!–index.wxml–>

<view style=“transform:translateY(-80rpx)” class=“transtion”>

<view>0</view>

<view>1</view>

<view>2</view>

<view>3</view>

<view>4</view>

<view>5</view>

<view>6</view>

<view>7</view>

<view>8</view>

<view>9</view>

</view>

<view style=“transform:translateY(-160rpx)” class=“transtion”>

<view>0</view>

<view>1</view>

<view>2</view>

<view>3</view>

<view>4</view>

<view>5</view>

<view>6</view>

<view>7</view>

<view>8</view>

<view>9</view>

</view>

<view style=“transform:translateY(-240rpx)” class=“transtion”>

<view>0</view>

<view>1</view>

<view>2</view>

<view>3</view>

<view>4</view>

<view>5</view>

<view>6</view>

<view>7</view>

<view>8</view>

<view>9</view>

</view>

<view style=“transform:translateY(-320rpx)” class=“transtion”>

<view>0</view>

<view>1</view>

<view>2</view>

<view>3</view>

<view>4</view>

<view>5</view>

<view>6</view>

<view>7</view>

<view>8</view>

<view>9</view>

</view>

<view style=“transform:translateY(-400rpx)” class=“transtion”>

<view>0</view>

<view>1</view>

<view>2</view>

<view>3</view>

<view>4</view>

<view>5</view>

<view>6</view>

<view>7</view>

<view>8</view>

<view>9</view>

</view>

<view style=“transform:translateY(-480rpx)” class=“transtion”>

<view>0</view>

<view>1</view>

<view>2</view>

<view>3</view>

<view>4</view>

<view>5</view>

<view>6</view>

<view>7</view>

<view>8</view>

<view>9</view>

</view>

<view style=“transform:translateY(-560rpx)” class=“transtion”>

<view>0</view>

<view>1</view>

<view>2</view>

<view>3</view>

<view>4</view>

<view>5</view>

<view>6</view>

<view>7</view>

<view>8</view>

<view>9</view>

</view>

<view style=“transform:translateY(-640rpx)” class=“transtion”>

<view>0</view>

<view>1</view>

<view>2</view>

<view>3</view>

<view>4</view>

<view>5</view>

<view>6</view>

<view>7</view>

<view>8</view>

<view>9</view>

</view>

<view style=“transform:translateY(-720rpx)” class=“transtion”>

<view>0</view>

<view>1</view>

<view>2</view>

<view>3</view>

<view>4</view>

<view>5</view>

<view>6</view>

<view>7</view>

<view>8</view>

<view>9</view>

</view>

<view style=“transform:translateY(-800rpx)” class=“transtion”>

<view>0</view>

<view>1</view>

<view>2</view>

<view>3</view>

<view>4</view>

<view>5</view>

<view>6</view>

<view>7</view>

<view>8</view>

<view>9</view>

</view>

CSS

page{

background:#000;

}

.transtion{

transition:all 3s;

display: inline-block;

}

.transtion view{

padding:0;

margin:0;

height:80rpx;

font-weight:bold;

font-size:33px;

width:30px;

display:flex;

align-items:center;

flex-direction:column;

justify-content:center;

color:#fff;

}

不能理解这个rpx为什么会有这么大出入,

苹果手机依次向下,

安卓大屏依次向上,

一部分安卓依次向下,

目前没有发现正常的 9个数全部对齐的,经过测试和手机分辨率有关,请求帮助

4 回复

.transtion view 加个 overflow:hidden;呢

字体改一下,各数字的占位空间不一样,1可能比较小,0,8,9这种最大

你可以限制数字所在的view的宽高,清除默认行间距

求指导啊 大神们

回到顶部