vux中的scroller,内容过多，translateX的值该怎么动态去改变

Question

1. 问题是，使用vux的scroller，但是里面的块过多，动态改变了width，但是translateX该怎么改变？
   2.相关代码：

<scroller lock-y :scrollbar-x=false :bounce=false>
<div class="box1" id="box1">

<div class="box1-item" v-for="i in item">
    <span>{{' 成员 ' + i + ' '}}</span>
</div>

</div>
</scroller>
其中item:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
var boxwidth = this.item.length;
document.getElementById("box1").style.width = boxwidth*200 + "px";
动态修改该box1的width，但是里面有个transform:translateX(-1114px) translateY(0px) translateZ(0px) scale(1, 1); translateX 的值最大为1114px,当滑动时，该如何动态去改变translateX的值呢？
3.当前情况为，如果我直接将translateX的值设置一下之后，页面将不能滑动。
4.请教大神们帮忙看一下~谢谢大神~

Answer 1

在内容变更后，使用reset方法重置宽度。

Answer 2

var boxwidth = this.item.length;
document.getElementById("box1").style.width = boxwidth*200 + "px";
      this.$nextTick(() => {
  this.$refs.scroller.reset()
})