E企盈营销工具技术服务商 热线:4006-838-530

picker,微信小程序picker组件

E企盈直播平台营销卖货系统

在小程序的开发应用中,我们会经常用到picker组件。官方文档:下面是一个开发过程中的一个小小的事例。首先是效果图:HTML部分的代码:formbindsubmit=”teformSubmit”!–推广类型–viewclass=’motionflexac’viewclass=’motionText’推广类型/viewviewclass=”sectionflexjac”pickerbindchange=”expandTypeChange”value=”{{expandTypeID}}”range=”{{expandType}}”viewclass=”picker”{{expandType[expandTypeID]}}/view/pickerimagesrc=’/img/img/jiantou@2x.png’class=’sectImg’/image/view!–此处的input框可以把滚动选择器的数据放进去,然后点击提交的时候把数据传给后台–inputstyle=’display:none;’name=”expandType”value=”{{expandType[expandTypeID]}}”/input/view!–推广类型end–!–推广区域–viewclass=’motionflexac’viewclass=’motionText’推广区域/viewviewclass=”sectionflexjac”pickermode=”region”bindchange=”expandAreaChange”value=”{{region}}”custom-item=”{{customItem}}”viewclass=”picker”{{region[1]}}-{{region[2]}}/view/pickerimagesrc=’/img/img/jiantou@2x.png’class=’sectImg’/image/viewinputstyle=’display:none;’name=’expandArea’value='{{region[1]}}-{{region[2]}}’/input/view!–推广区域end–!–投放位置–viewclass=’motionflexac’viewclass=’motionText’投放位置/viewviewclass=”sectionflexjac”pickerbindchange=”putPlaceChange”value=”{{putPlaceId}}”range=”{{putPlace}}”viewclass=”picker”{{putPlace[putPlaceId]}}/view/pickerimagesrc=’/img/img/jiantou@2x.png’class=’sectImg’/image/view!–此处的input框可以把滚动选择器的数据放进去,然后点击提交的时候把数据传给后台–inputstyle=’display:none;’name=”putPlace”value=”{{putPlace[putPlaceId]}}”/input/view!–投放位置end–!–推广时间–viewclass=’motionflexac’viewclass=’motionText’推广时间/viewviewclass=”sectionflexjac”pickerbindchange=”expandTimeChange”value=”{{expandTimeId}}”range=”{{expandTime}}”viewclass=”picker”{{expandTime[expandTimeId]}}/view/pickerimagesrc=’/img/img/jiantou@2x.png’class=’sectImg’/image/view!–此处的input框可以把滚动选择器的数据放进去,然后点击提交的时候把数据传给后台–inputstyle=’display:none;’name=”expandTime”value=”{{expandTime[expandTimeId]}}”/input/view!–推广时间end–!–广告币–viewclass=’motionflexac’viewclass=’motionText’需支付广告币数量/viewinputname=’num’value=”placeholder=’数量’/input/viewviewclass=’proText’支付成功后即表示您已同意(推广说明)/viewbuttonformType=”submit”立即购买/button/form我们要做成form表单,这个数据是要传送给后台。接下来是样式部分:page{background:rgba(247,247,247,1);}.motion{margin:20rpxauto;width:702rpx;height:88rpx;background:rgba(255,255,255,1);border-radius:20rpx;justify-content:space-between;box-shadow:12rpx0px21rpxrgba(153,153,153,0.2);}.motionText{margin-left:25rpx;font-size:30rpx;color:rgba(51,51,51,1);}.picker{font-size:30rpx;margin-right:10rpx;color:rgba(253,130,48,1);}input{text-align:right;margin-right:25rpx;width:300rpx;font-size:30rpx;color:rgba(253,130,48,1);}.proText{width:702rpx;font-size:28rpx;margin:30rpxauto;color:#999;padding-left:62rpx;}.sectImg{width:14rpx;height:22rpx;margin-right:25rpx;}button{width:480rpx;height:80rpx;line-height:80rpx;font-size:32rpx;color:#fff;margin:100rpxauto;background:linear-gradient(80deg,rgba(247,97,59,1),rgba(253,130,48,1));border-radius:8rpx;}还有一些是公共样式:.img{width:100%;height:100%;}.br{border-radius:50%;}.indent{text-indent:2em;}.flex{display:flex;}.flexc{display:flex;flex-direction:column;}.flexw{display:flex;/word-wrap:wrap;/flex-wrap:wrap;}.flexjc{display:flex;justify-content:center;}.flexac{display:flex;align-items:center;}.flexjc{display:flex;justify-content:center;}.flexjac{display:flex;justify-content:center;align-items:center;}.text_hidden{overflow:hidden;text-overflow:ellipsis;white-space:wrap;}.f36{font-size:36rpx;}.f34{font-size:34rpx;}.f32{font-size:32rpx;}.f30{font-size:30rpx;}.f29{font-size:29rpx;}.f28{font-size:28rpx;}.f26{font-size:26rpx;}.f24{font-size:24rpx;}.f22{font-size:22rpx;}.f20{font-size:20rpx;}.text{text-align:center;}.line{width:100%;border-top:1rpxsolid#efefef;}.c6{color:#666;}.c9{color:#999;}.b10{border-radius:10rpx;}最后是js部分://pages/mine/training/promotion/promotion.jsPage({/页面的初始数据/data:{expandType:[“内涵段子”,”抖音”,”最右”,”火山小视频”,”爱奇艺”,”腾讯视频”],//推广类型expandTypeID:0,region:[‘浙江省’,’杭州市’,’江干区’],//推广区域,微信自带putPlace:[“首页”,”尾页”],//推广位置putPlaceId:0,expandTime:[“1-30天”,”31-60天”,”61-90天”],//推广时间expandTimeId:0,},//推广类型expandTypeChange:function(e){console.log(‘推广类型’,e.detail.value)this.setData({expandTypeID:e.detail.value//把当前的触摸的索引给expandTypeID})},//地区选择expandAreaChange:function(e){console.log(‘地区选择’,e.detail.value)this.setData({region:e.detail.value})},//投放位置putPlaceChange:function(e){console.log(‘投放位置’,e.detail.value)this.setData({putPlaceId:e.detail.value})},//推广时间expandTimeChange:function(e){console.log(‘推广时间’,e.detail.value)this.setData({expandTimeId:e.detail.value})},//表单提交时间teformSubmit(e){console.log(‘form=’,e)letval=e.detail.valueconsole.log(‘form’,val)},/生命周期函数–监听页面加载/onLoad:function(options){},/生命周期函数–监听页面初次渲染完成/onReady:function(){},/生命周期函数–监听页面显示/onShow:function(){},/生命周期函数–监听页面隐藏/onHide:function(){},/生命周期函数–监听页面卸载/onUnload:function(){},/页面相关事件处理函数–监听用户下拉动作/onPullDownRefresh:function(){},/页面上拉触底事件的处理函数/onReachBottom:function(){},/用户点击右上角分享/onShareAppMessage:function(){}})最后当我们提交表单时就会实现把数据传输到后台:

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » picker,微信小程序picker组件
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏