折腾:
【记录】用小程序实现测评系统的前端页面
期间,需要实现同时支持这种:
![](https://www.crifan.com/files/pic/uploads/2021/03/4e3b87a572ea41ff82bc2895c4d30161.jpg)
即,根据选项类型不同,决定显示text还是image
继续参考:
<view wx:if="{{length > 5}}">1</view> <view wx:elif="{{length > 2}}">2</view> <view wx:else>3</view>
去试试
不过先要解决小程序中按钮中添加图片:
类似按钮的中间显示图片
![](https://www.crifan.com/files/pic/uploads/2021/03/a47daec95816452ba4ca51660db0272d.jpg)
之前此处单个选项是按钮用的是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超过边界了:
![](https://www.crifan.com/files/pic/uploads/2021/03/5b933b21c4eb4256af02f49d773d58ef.jpg)
想办法:
超过不显示,或者最好换行
去搜搜:
text-wrap
line-wrap?
css overflow new line
用:
word-wrap: break-word;
可以换行:
![](https://www.crifan.com/files/pic/uploads/2021/03/71d22324d20b45ecac36cfa188b38b3a.jpg)
然后再去居中对齐:
.single_option { 。。。 display: flex; /* align-items: center; */ justify-content: center; } .single_option_button { 。。。 /* text-overflow: */ word-wrap: break-word; }
结果选项显示也不对了:
![](https://www.crifan.com/files/pic/uploads/2021/03/2227cf99f4e54b13abb1f2bf81f55afb.jpg)
再去换成button内部显示image试试
然后确定是可以的:
不过由于鼠标点选时,好像先点击到button:
![](https://www.crifan.com/files/pic/uploads/2021/03/6dac63830fd64e038c21a32ce21db784.jpg)
然后才能点选到image:
![](https://www.crifan.com/files/pic/uploads/2021/03/95853f5c3c48464ea5e0dfbe231e9626.jpg)
好像是z轴的问题?
去加上:
.single_option_image { ... z-index: 10; }
果然可以直接点击到image了:
![](https://www.crifan.com/files/pic/uploads/2021/03/308bf02ddc6a43948dc1d3d1ce842801.jpg)
接着遇到了:
需要动态判断和决定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>
结果不行,不起效果。
![](https://www.crifan.com/files/pic/uploads/2021/03/99a9a1747e5c422780261efd2a917c82.jpg)
->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)
对应原始数据是:
![](https://www.crifan.com/files/pic/uploads/2021/03/cfa45388bde348d487623cda78e10c93.jpg)
注,对于image,已处理为url了:
![](https://www.crifan.com/files/pic/uploads/2021/03/4f950b8e93d3405d9360319c18ce4609.jpg)
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,且高度低一点:
![](https://www.crifan.com/files/pic/uploads/2021/03/ace7a082af9b43cb993579d83e897306.jpg)
当选项是image时,显示图片,且高度高一点:
![](https://www.crifan.com/files/pic/uploads/2021/03/e5751ac0aaf740f3910c2cac6a7418c8.jpg)
转载请注明:在路上 » 【已解决】小程序中根据选项类型不同显示不同内容即文字或图像