微信小程序图文混编

最新推荐文章于 2024-09-02 09:41:56 发布

aaron9185

最新推荐文章于 2024-09-02 09:41:56 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

文章标签：小程序图文混编 picker选择器动态图片

本文链接：https://blog.youkuaiyun.com/aaron9185/article/details/78524706

内容：图文混编
图片跟随 选择器选择而改变








<view 
class="userdata">
<viewclass="userdata-name">单排扣</view>
<view 
class="userdata-symbol"></view>
<pickerbindchange="coatFatThinChange"value="{{coatFatThinValue}}"range="{{coatFatThinArray}}"class="userdata-input">
<text>{{coatFatThinArray[coatFatThinValue]}}</text>
</picker>
<imageclass='img-picker'src='../../../assets/images/neck{{coatFatThinValue}}.png'></image>
</view>


Page({
data: {
coatFatThinArray: ['单扣大开领', 
'单扣一字领', '单扣小方领', 
'单扣圆领', '立领', 
'迷你小方领'],
coatFatThinValue: 0,
},
//单排扣 选择器
coatFatThinChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
coatFatThinValue: e.detail.value,})
},

})



.userdata {
margin: 10rpx0rpx
0rpx 
0rpx;
border: 1rpxsolid
#6c6c6c;
width: 90%;
display: flex;
flex-direction: 
row;
border-radius: 
10rpx;
align-items: 
center;
}
.userdata-name {
width: 110rpx;
/* border: 1rpx solid #6c6c6c; */
padding: 20rpx0rpx
20rpx 
20rpx;
}
/*第一个箭头*/
.userdata-symbol:after {
content: "";
display: inline-block;
width: 40rpx;
height: 40rpx;
margin: 15rpx0rpx
10rpx 
0rpx;
border-left: 
1rpx solid#6c6c6c;
}
/*后面三个箭头*/
.userdata-input {
width: 380rpx;
/* border: 1rpx solid #6c6c6c; */
}
.img-picker{
width: 80rpx;
height: 80rpx;
}