微信小程序图文混编重写picker组件

效果图：

显示控件点击弹出 picker选择

弹出选择界面选择回显

回显，再次点击弹出界面并标识褚显示哪一个

< view class= "userdata" bindtap= 'showModel'>

< view class= "userdata-name">领维 </ view >

< view class= "userdata-symbol"></ view >

< text class= "userdata-input">{{goodsInfoIndexName}} </ text >

< image class= 'img-picker' src= '{{goodsInfo[goodsInfoIndex].image}}'></ image >

</ view >

< view class= "goods-detail" hidden= "{{isShowSelectInfo}}">

< view class= "mask"></ view >

< view class= "goodsdetail">

< view class= "dialogtip">

< text class= "tipview">请您选择 </ text >

</ view >

< radio-group bindchange= "radioChangeNeck">

< view wx:for= "{{goodsInfo}}">

< view class= "radio-group" data-name= "{{index}}" bindtap= 'radioChangeNeckBind'>

< view class= 'radio-rad'>

< radio value= "{{item.radioValue}}" checked= '{{index == goodsInfoIndex?true:false}}' / >

</ view >

< view class= 'radio-pic'>

< image src= "{{item.image}}"></ image >

</ view >

< view class= 'radio-title'>

< text >{{item.title}} </ text >

</ view >

< view class= 'radioLine'></ view >

</ view >

</ radio-group >

</ view >

Page({

data: {

goodsInfoIndexName: '请您选择',

isShowSelectInfo: true, //遮罩层是否显示

goodsInfo: [ //遮罩层样式

{ image: '../../assets/images/neck0.png', title: '温莎领也叫敞角领，左右领构成的角度在120度~180度之间。是偏正式而优雅的风格，适用于各种正式、半正式风格。', radioValue: '0', radioName: '单扣大开领'}, //单扣大开领

{ image: '../../assets/images/neck1.png', title: '超大的开角，配以宽大的领结，味道与众不同。本身带有老派绅士的气质。', radioValue: '1', radioName: '单扣一字领'}, //单扣一字领

{ image: '../../assets/images/neck2.png', title: '单扣小方领和标准领类似，两片衬衫领的角度适中，只是领子宽度较窄，这就属于时尚风格，适合年轻人，特别是学生穿着。', radioValue: '2', radioName: '单扣小方领'}, //单扣小方领

{ image: '../../assets/images/neck3.png', title: '圆角领也是一种个性十足的领子。也可以叫伊顿领，源自伊顿公学的校服，也有浓厚的学院风。', radioValue: '3', radioName: '单扣圆领'}, //单扣圆领

{ image: '../../assets/images/neck4.png', title: '立领是只有领座没有翻领的领型，它不在西装体系内，款式也有局限，几乎只能作休闲穿。', radioValue: '4', radioName: '立领'}, //立领

{ image: '../../assets/images/neck5.png', title: '迷你小方领和标准领类似，两片衬衫领的角度适中，只是领子宽度较窄，这就属于时尚风格，适合年轻人，特别是学生穿着。', radioValue: '5', radioName: '迷你小方领'}, //迷你小方领

]

radioChangeNeck: function (e) { // 单选按钮点击样式

var that = this

console.log( 'radio发生change事件，携带value值为：', e.detail.value)

that.setData({

isShowSelectInfo: true,

goodsInfoIndex: e.detail.value,

goodsInfoIndexName: that.data.goodsInfo[e.detail.value].radioName,

})

radioChangeNeckBind: function(e){

var that = this

console.log( 'radio发生change事件，携带value值为：', e.currentTarget.dataset.name)

that.setData({

isShowSelectInfo: true,

goodsInfoIndex: e.currentTarget.dataset.name,

goodsInfoIndexName: that.data.goodsInfo[e.currentTarget.dataset.name].radioName,

})

}

})

.userdata { /*下部分四个输入框*/

margin: 10 rpx 0 rpx 0 rpx 0 rpx;

border: 1 rpx solid #6c6c6c;

width: 90%;

display: flex;

flex-direction: row;

border-radius: 10 rpx;

align-items: center;

background-color: #fff

}

.userdata-name {

width: 110 rpx;

padding: 20 rpx 0 rpx 20 rpx 20 rpx;

}

.userdata-symbol:after { /*第一个箭头*/

content: "";

display: inline-block;

width: 40 rpx;

height: 40 rpx;

margin: 15 rpx 0 rpx 10 rpx 0 rpx;

border-left: 1 rpx solid #6c6c6c;

}

.userdata-input { /*后面三个箭头*/

width: 380 rpx;

}

.img-picker {

width: 80 rpx;

height: 80 rpx;

}

.goods-detail .mask { /* 遮罩层 */

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100%;

z-index: 999999;

}

.goods-detail .mask {

background: rgba( 0, 0, 0, 0.7 );

}

.goodsdetail {

position: fixed;

bottom: 0%;

width: 100%;

left: 0%;

margin-top: -50%;

background: #fff;

z-index: 99999999999999;

overflow: hidden;

}

.dialogtip { /* 顶部提示信息 */

margin-top: 20 rpx;

margin-left: 20%;

}

.tipview {

font-size: 26 rpx;

color: #e60012;

}

.radio-group { /* 遮罩层单选按钮 */

margin: 0 rpx 2% 0 rpx 2%;

display: flex;

}

.radio-rad {

width: 60 rpx;

height: 125 rpx;

text-align: center;

line-height: 125 rpx;

}

.radio-pic {

width: 125 rpx;

height: 125 rpx;

}

.radio-pic image {

width: 100%;

height: 100%;

}

.radio-title {

display: flex;

width: 500 rpx;

height: 125 rpx;

}

.radio-title text {

margin-left: 20 rpx;

color: #000;

font-size: 24 rpx;

}

.radioLine {

display: block;

width: 100%;

border-bottom: 1 rpx solid #f1f1f1;

}

微信小程序图文混编重写picker组件相关推荐

微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
微信小程序开发学习5（自定义组件）
微信小程序开发学习5(自定义组件) 1.学习目标能够知道如何自定义小程序组件能够知道小程序组件中behaviors的作用能够知道如何安装和配置vant-weapp组件库能够知道如何使用MobX ...
【微信小程序经验】各类图表相关组件+Demo源码（折线图，柱状图，K线，分时图）
各类图表功能,小程序自带API并没有提供,所以很多人就用了其他方法来实现,我将这些实现方法和教程聚合一下,以便能够迅速而方便的使用: 相关文章: 在微信小程序中绘制图表(part1) 在微信小程序中绘 ...
微信小程序template模板与component自定义组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
微信小程序网悦新闻开发--自定义组件开发（六）
目录微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
微信小程序图片全屏预览组件，并解决svg真机显示黑屏问题
自己码了个微信小程序图片全屏预览组件,并解决了svg真机显示黑屏问题(即png等格式可以正常显示,但就svg无法显示). /*** 微信小程序图片预览组件* 1.支持预览svg.png.jpeg.jp ...
微信小程序----开发rui-dtpicker多粒度日期组件
使用到 GitHub 下载 WX-RUI 的代码,将 component 目录拷贝到自己的项目中.然后按照如下的方式使用组件,以 dtpicker 为例,其它组件在对应的文档页查看: 1. 添加需要 ...
微信小程序的经验总结，UI组件、图表、自定义bar你学会了吗
目录写在前面 1 如何使用自定义tabbar及权限控制拷贝官方demo中的custom-tab-bar文件到根目录入口文件app.json启用自定义tabbar 回到自定义custom-tab- ...
[微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 先上效果图: 点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层; <button bi ...

微信小程序图文混编重写picker组件

微信小程序图文混编重写picker组件相关推荐

最新文章

热门文章

微信小程序 图文混编 重写picker组件

微信小程序 图文混编 重写picker组件相关推荐

最新文章

热门文章

微信小程序图文混编重写picker组件

微信小程序图文混编重写picker组件相关推荐