xljx18335908301@outlook.com 's Blog

1.横向滚动内部子元素不滚动， 仅显示滚动条移动效果

父元素：

display: flex;
flex-direction: row; /* web标准中无需此属性 */
/*flex-wrap: nowrap;*/
/*overflow-x: auto; */ /* 无需设置 */
white-space: nowrap;

子元素：

display: inline-block;

*排查出的原因为设置了以下属性：

transform: translateX(0%);

与w3c 标准不同，不能使用百分比，而应当使用px;

2.动态样式问题：

style="
    transform: translateX({{translateXPercentage + '%'}});
    overflow-x: {{ swiperContainerScrollEnable ?'auto' :'unset' }};
"

*style 对应的字符串值中不能换行，即只能为一行！

3.

问题不大，人家就是这么搞的！

4.touch事件回调问题

<view class="swiper-container"
    onTouchStart="onTouchStart"
    onTouchMove="onTouchMove"
    onTouchEnd="onTouchEnd"
    onTouchCancel="onTouchCancel"
></view>

.swiper-container {
  width: 100%;
  height: 100%;
  border-radius: inherit;

  box-sizing: border-box;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  /* padding: 4px; */
  /* scroll-behavior: initial; */
}

*如果overflow-x 设置为scroll, 则真机上onTouchCancel 会被调用;

visible 设置元素可见但不滚动；

5. transform 单位问题

transform: translate3d(-20%,0,0);
transform: translateX(-300px);

*真机上百分比明显不对，设置值与实际表现值大致为1:7的差距；

动画时间无法控制！！！

6.部署单位问题

小部件内根元素设置width、height 只能为100%， 不能指定具体rpx,  真机上尺寸较小；

js 中获取宽度px: my.getSystemInfoSync().screenWidth * 726 / 750

7.image 显示方式

IDE 中使用mode 属性生效， 真机中使用web 标准的object-* 属性；

8.flex 横向必须显示设置row 值；

9. 编译问题

<image class="swiper-item-view"
    style="width:{{100 / imgDataList.length + '%'}}"
    a:for="{{imgDataList}}"
    src={{item.actImg || item.good.itemPic}}
    mode="aspectFill"
    quality="high"
/>

*“||” 两侧不能有空格

10.  css   visibility: hidden;    无效！！！ 使用条件渲染代替！

11.canvas 不支持真机调试

12.

13.

14.

15. 

文档中事件并非支持，需要参考小程序文档进行开发；

淘宝商品数据结构： https://i.taobao.com/my_taobao.htm  （页面内使用的接口）