最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】小程序中根据选项类型不同显示不同内容即文字或图像

显示 crifan 145浏览 0评论
折腾:
【记录】用小程序实现测评系统的前端页面
期间,需要实现同时支持这种:
即,根据选项类型不同,决定显示text还是image
继续参考:
条件渲染 · 小程序
<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>
去试试
不过先要解决小程序中按钮中添加图片:
类似按钮的中间显示图片
之前此处单个选项是按钮用的是button,button中是text:
      <view
        wx:for="{{firtQuestonOptions}}"
        wx:for-index="questionIdx"
        wx:for-item="curOption"
        wx:key="*this"
  
        class='single_option'
        bindtap='singleOptionClicked'
      >
        <button class="single_option_button">
          {{curOption}}
        </button>
      </view>
现在也可以改为:
view中是text
然后view加image
也可以考虑:
button中间加上image
去找找看:
小程序 button image
微信小程序 button的样式设置为某张图片 – 简书
但是要考虑到:
还要很好的支持背景色才行,不能图片覆盖了背景色
小程序button背景显示图片 – 个人文章 – SegmentFault 思否
微信小程序 button 的样式设置为图片 – 老亨的博客 – CSDN博客
而且此处代码中,也懒得,或者说不希望,不想去,动态生成style的值-》降低显示效率
算了,换成view中间加上照片吧
去试试
<view class="single_option_button">
  {{curOption}}
</view>
结果导致超长的text超过边界了:
想办法:
超过不显示,或者最好换行
去搜搜:
text-wrap
line-wrap?
css overflow new line
CSS3 text-wrap 属性
css – How can I make text appear on next line instead of overflowing? – Stack Overflow
html – Add newline only on overflow – Stack Overflow
用:
word-wrap: break-word;
可以换行:
然后再去居中对齐:
.single_option {
。。。
  display: flex;
  /* align-items: center; */
  justify-content: center;
}

.single_option_button {
。。。

  /* text-overflow:  */
  word-wrap: break-word;
}
结果选项显示也不对了:
再去换成button内部显示image试试
然后确定是可以的:
不过由于鼠标点选时,好像先点击到button:
然后才能点选到image:
好像是z轴的问题?
去加上:
.single_option_image {
  ...
  z-index: 10;
}
果然可以直接点击到image了:
接着遇到了:
需要动态判断和决定style(height)
        <button class="single_option_button">
          <text
            wx:if="{{firstQuestion.option_type == 'text'}}"
            style="height: 40px;"
          >
            {{curOption.option_text}}
          </text>

          <image
            wx:if="{{firstQuestion.option_type == 'image'}}"
            style="height: 135px;"
            class="single_option_image"
            src="{{curOption.option_image}}"
            mode="aspectFit"
          ></image>
        </button>
结果不行,不起效果。
->image的高度限制没有效果
后来发现是:其实起效果了,只是style的height给了image,
实际上应该是给父级元素才对
【总结】
最后用代码:
pages/question/question.wxml

      <view
        wx:for="{{firtQuestonOptions}}"
        wx:for-index="questionIdx"
        wx:for-item="curOption"
        wx:key="curOption.option_index"
  
        class='single_option'
        bindtap='singleOptionClicked'
      >
        <button class="{{firstQuestionOptionStyle}}">
          <view
            wx:if="{{firstQuestion.option_type == 'text'}}"
            class="single_option_text"
          >
            {{curOption.option_text}}
          </view>

          <image
            wx:elif="{{firstQuestion.option_type == 'image'}}"
            class="single_option_image"
            src="{{curOption.option_image}}"
            mode="aspectFit"
          ></image>
        </button>
      </view>

    </view>
  </view>
pages/question/question.js
        var firtQuestonOptions = firstQuestion.options
        console.log("firtQuestonOptions=%o", firtQuestonOptions)
对应原始数据是:
注,对于image,已处理为url了:
pages/question/question.wxss
.single_option {
  margin-top: 15px;
  margin-left: 43px;
  margin-right: 43px;
}

.single_option_button {
  /* height: 40px; */
  /* height: 135px; */
  /* max-width:  */
  border-radius: 15px;
  background: rgba(238,238,238,1);

  font-size: 16px;
  font-family: "PingFangSC-Regular", "苹方", "Microsoft Yahei", "微软雅黑", "Heiti SC";
  font-weight: 400;
  color: rgba(51,51,51,1);

  /* text-overflow:  */
  /* word-wrap: break-word; */

  display: flex;
  align-items: center;
  justify-content: center;
}

.single_option_button::after{
  border: none;
}

.single_option_button_text {
  height: 40px;
}

.single_option_button_image {
  height: 135px;
}

.single_option_text {
  text-align: center;
}

.single_option_image {
  /* max-height: 125px;
  min-width: 125px; */

  /* width: 88px; */
  width: 125px;
  height: 125px;

  z-index: 10;
}
基本上实现想要的效果:
当选项是text时,显示text,且高度低一点:
当选项是image时,显示图片,且高度高一点:

转载请注明:在路上 » 【已解决】小程序中根据选项类型不同显示不同内容即文字或图像

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
16 queries in 0.110 seconds, using 9.28MB memory