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(){}})最后当我们提交表单时就会实现把数据传输到后台:













