收藏
回答

两个swiper-item包含两个editor.js设置内容并排显示的问题?

1 wxml页面

  <view class="vcontainer">
  <swiper class="vswiper" indicator-dots="true" current="0">
      <swiper-item class="vswiperitem" >
        <editor id="editor1" class="editor1" auto-height  bindinput="onEditorInput" bindchange="onEditorChange"
          placeholder="请输入摘要" bindready="onEditorReady" />
        <view class="editor-toolbar">
          <image class='image' src="/pages/images/bold6.svg" bind:tap="onBold" data-name="bold" />
          <image class="image" src="/pages/images/tool_red.svg" bind:tap="onColor" data-name="red" />
          <image class="image" src="/pages/images/tool_blue.svg" bind:tap="onColor" data-name="blue" />
          <image class="image" src="/pages/images/tool_green.svg" bind:tap="onColor" data-name="green" />
          <image class="image" src="/pages/images/tool_black.svg" bind:tap="onColor" data-name="black" />
        </view>
      </swiper-item>
      <swiper-item class="vswiperitem">
        <editor id="editor2" class="editor2" auto-height bindinput="onEditorInput2" bindchange="onEditorChange"
          bindready="onEditorReady2"
          placeholder="请输入内容"/>
      </swiper-item>
</swiper>
</view>

    样式如下,

.vcontainer{
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 20rpx;
  width: 100%; 
  overflow: auto;
}
.editor-toolbar{
  display: flex;
  margin-top: 15rpx;
  margin-left:20rpx;
}
.editor1{
  flex:1;
  height: 100%;
  border: 1rpx solid #cccccc;
  padding: 15rpx;
  font-size: 36rpx;
}
.editor2{
  flex:1;
  height: 100%;
  border: 1rpx solid #cccccc;
  padding: 15rpx;
}
.vswiper{
  display: block;
  flex: 1;
  width: 100%;
}
.vswiperitem{
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

2 js中为每个editor设置内容

onEditorReady(e) {
    console.log("编辑器1 Ready ");
    const that = this;
    wx.createSelectorQuery().select('#editor1').context().exec((res) => {
      that.editorCtx = res[0].context;
      if (this.data.pagetype == "pagearticle") {
        that.editorCtx.setContents({
          html: that.data.articleinfo.zhailu
        });
      } else if (this.data.pagetype == "pagexiefa") {
        that.editorCtx.setContents({
          html: that.data.xiefainfo.zhailu
        });
      }
      console.log('---编辑器1初始化完成--', res);
    });
    // wx.createSelectorQuery().select('#editor2').context().exec((res) => {
    //   that.editorCtx2 = res[0].context;
    //   if (this.data.pagetype == "pagearticle") {
    //     that.editorCtx2.setContents({
    //       html: that.data.articleinfo.content
    //     });
    //   } else if (this.data.pagetype == "pagexiefa") {
    //     that.editorCtx2.setContents({
    //       html: that.data.xiefainfo.content
    //     });
    //   }
    //   console.log('---编辑器2初始化完成--', res);
    // });
  },
  onEditorReady2(e) {
    const that = this;
    wx.createSelectorQuery().select('#editor2').context().exec((res) => {
      that.editorCtx2 = res[0].context;
      setTimeout(() => {
        if (this.data.pagetype == "pagearticle") {
          that.editorCtx2.setContents({
            html: that.data.articleinfo.content
          });
        } else if (this.data.pagetype == "pagexiefa") {
          that.editorCtx2.setContents({
            html: that.data.xiefainfo.content
          }, 1000);
        }
      });
      console.log('---编辑器2初始化完成--');
    });

  前端两个swiperitem并排显示了,而没有单独显示第一个swiperitem,怎么回事?前端显示效果如下

回答关注问题邀请回答
收藏

1 个回答

  • 智能回答 智能回答 本次回答由AI生成
    02-05
    有用
    回复
登录 后发表内容