折腾:
【记录】用小程序实现测评系统的前端页面
期间,需要实现同时支持这种:

即,根据选项类型不同,决定显示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
但是要考虑到:
还要很好的支持背景色才行,不能图片覆盖了背景色
而且此处代码中,也懒得,或者说不希望,不想去,动态生成style的值-》降低显示效率
算了,换成view中间加上照片吧
去试试
<view class="single_option_button"> {{curOption}} </view>
结果导致超长的text超过边界了:

想办法:
超过不显示,或者最好换行
去搜搜:
text-wrap
line-wrap?
css overflow new line
用:
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时,显示图片,且高度高一点:

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