小程序新手引导自定义组件

//WXML
<!-- 组件遮罩引导 -->
<view class='page' hidden='{{modalHidden}}'><view class='conts'><!--*****************************组件左上角新手引导 ***************************--><view class='head_tab' wx:if="{{pract_id==4}}"><label class='suc_lab'><text>主动一点</text></label><label class='suc_labs'>矜持一点</label></view><view class='head_tab' wx:if="{{pract_id==7}}"><label class='head_tab_suc_lab'><text>主动一点</text></label><label class='head_tab_suc_labs'>矜持一点</label></view><view class='tab_nexts' wx:if="{{pract_id==4||pract_id==7}}"><view class='next_imgs' bindtap='btn_next'>跳过新手引导</view></view><view class='tab_next' wx:else><view class='next_imgs' bindtap='btn_next'>跳过新手引导</view></view><!--*****************************组件初始化1小程序介绍 ***************************--><view class='module_cont' wx:if="{{pract_id==0}}"><view class='module_bg'><label class='modules_text'>{{context}}</label></view><image class='modules_wites_img' src='{{wite_top_img}}'></image><image class='modules_me_imgs' src='{{less_img}}'></image></view><view class='modules_bottom' wx:if="{{pract_id==0}}"><image src='{{read_img}}' class='modules_red_img' bindtap='btnmodules'></image></view><!--*****************************组件初始化2设置入口 ***************************--><view class='module_cont_tab1' wx:if="{{pract_id==1}}"><view class='module_bg'><label class='modules_text'>{{context}}</label></view><image class='modules_wites_img1' src='{{wites_img}}'></image><image class='modules_me_imgs1' src='{{less_img}}'></image></view><!-- <view class='modules_bottom' wx:if="{{pract_id==2}}"><image src='{{read_img}}' class='modules_red_img'></image></view> --><!--*****************************组件初始化小程序3设置页面 ***************************--><view class='module_cont2' wx:if="{{pract_id==2}}"><view class='module_bg'><label class='modules_text'>{{context}}</label></view><image class='modules_wites_img' src='{{wite_top_img}}'></image><image class='modules_me_imgs' src='{{less_img}}'></image></view><view class='modules_bottom2' wx:if="{{pract_id==2}}"><image src='{{read_img}}' class='modules_red_img' bindtap='btnmodule2'></image></view><!--*****************************组件初始化小程序4练习大冒险 ***************************--><view class='module_cont3' wx:if="{{pract_id==3}}"><view class='module_bg'><label class='modules_text'>{{context}}</label></view><image class='modules_wites_img' src='{{wite_top_img}}'></image><image class='modules_me_imgs' src='{{less_img}}'></image></view><!-- <view class='modules_bottom2' wx:if="{{pract_id==3}}"><image src='{{read_img}}' class='modules_red_img' bindtap='btnmodule2'></image></view> --><!--*****************************组件初始化小程序5主动一下（邀请好友） ***************************--><view class='module_cont4' wx:if="{{pract_id==4}}"><image class='modules_wites_img4' src='{{wites_img}}'></image><image class='modules_me_imgs4' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><view class='modules_bottom2' wx:if="{{pract_id==4}}"><image src='{{read_img}}' class='modules_red_img' bindtap='btnmodule4'></image></view><!--*****************************组件初始化小程序6好友列表 ***************************--><view class='module_cont5' wx:if="{{pract_id==5}}"><image src='{{img_src}}' class='module_hed'></image><view class='module_img_co'><image src='{{img_src}}' class='module_url'></image><label class='module_name'>小恋爱</label></view><image class='modules_wites_img4' src='{{wites_img}}'></image><image class='modules_me_imgs4' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><view class='modules_bottom5' wx:if="{{pract_id==5}}"><image src='{{read_img}}' class='modules_red_img' bindtap='btnmodule6'></image></view><!--*****************************组件初始化小程序7矜持一下） ***************************--><view class='module_cont4' wx:if="{{pract_id==7}}"><image class='modules_wites_img4' src='{{wites_img}}'></image><image class='modules_me_imgs4' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><view class='modules_bottom2' wx:if="{{pract_id==7}}"><image src='{{read_img}}' class='modules_red_img' bindtap='btnmodule7'></image></view><!--*****************************组件初始化小程序8催促邀请 ***************************--><!-- 卡牌 --><view class='card_cont' wx:if="{{pract_id==8}}"><image src="{{image}}" class='card_cont_head'></image><view class='card_name'>laowu</view><view class='card_time'><text>已催促</text></view><view class='card_tow'>1楼</view></view><!--  --><view class='module_cont8' wx:if="{{pract_id==8}}"><image class='modules_wites_img8' src='{{wites_img}}'></image><image class='modules_me_imgs8' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><view class='modules_bottom8' wx:if="{{pract_id==8}}"><image src='{{read_img}}' class='modules_red_img' bindtap='btnmodule8'></image></view><!--*****************************组件初始化小程序9体力值 ***************************--><view class='module_cont9' wx:if="{{pract_id==9}}"><image class='modules_wites_img9' src='{{wites_img}}'></image><image class='modules_me_imgs9' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><view class='modules_bottom9' wx:if="{{pract_id==9}}"><image src='{{read_img}}' class='modules_red_img' bindtap='btnmodule9'></image></view><!--*****************************组件初始化小程序10邀请好友闯关 ***************************--><view class='module_cont10' wx:if="{{pract_id==10}}"><image class='modules_wites_img10' src='{{wites_img}}'></image><image class='modules_me_imgs10' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><!--*****************************组件初始化小程序11邀请好友闯关 ***************************--><view class='module_cont11' wx:if="{{pract_id==11}}"><image class='modules_wites_img10' src='{{wites_img}}'></image><image class='modules_me_imgs10' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><!--*****************************组件初始化小程序12闯关须知 ***************************--><view class='module_cont12' wx:if="{{pract_id==12}}"><image class='modules_wites_img12' src='{{wites_img}}'></image><image class='modules_me_imgs12' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><view class='modules_bottom12' wx:if="{{pract_id==12}}"><image src='{{read_img}}' class='modules_red_img12' bindtap='btnmodule12'></image></view><!--*****************************组件初始化小程序13好友加入 ***************************--><view class='module_cont13' wx:if="{{pract_id==13}}"><image class='modules_wites_img13' src='{{wites_img}}'></image><image class='modules_me_imgs13' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><view class='modules_bottom13' wx:if="{{pract_id==13}}"><image src='{{read_img}}' class='modules_red_img13' bindtap='btnmodule13'></image></view><!--*****************************组件初始化小程序14倒计时 ***************************--><view class='module_cont14' wx:if="{{pract_id==14}}"><image class='modules_wites_img14' src='{{wites_img}}'></image><image class='modules_me_imgs14' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><!-- <view class='modules_bottom13' wx:if="{{pract_id==14}}"><image src='{{read_img}}' class='modules_red_img13' bindtap='btnmodule14'></image></view> --><!--*****************************组件初始化小程序15阅读 ***************************--><view class='module_cont15' wx:if="{{pract_id==15}}"><image class='modules_wites_img12' src='{{wites_img}}'></image><image class='modules_me_imgs12' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><view class='modules_bottom12' wx:if="{{pract_id==15}}"><image src='{{read_img}}' class='modules_red_img12' bindtap='btnmodule15'></image></view><!--*****************************组件初始化小程序16阅读倒计时 ***************************--><view class='module_cont13' wx:if="{{pract_id==16}}"><image class='modules_wites_img13' src='{{wites_img}}'></image><image class='modules_me_imgs13' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><view class='modules_bottom13' wx:if="{{pract_id==16}}"><image src='{{read_img}}' class='modules_red_img13' bindtap='btnmodule16'></image></view><!--*****************************组件初始化小程序17回顾问题 ***************************--><view class='module_cont13' wx:if="{{pract_id==17}}"><image class='modules_wites_img13' src='{{wites_img}}'></image><image class='modules_me_imgs13' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><view class='modules_bottom13' wx:if="{{pract_id==17}}"><image src='{{read_img}}' class='modules_red_img13' bindtap='btnmodule17'></image></view><!--*****************************组件初始化小程序18发言 ***************************--><view class='module_cont13' wx:if="{{pract_id==18}}"><image class='modules_wites_img18' src='{{wites_img}}'></image><image class='modules_me_imgs18' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><view class='modules_bottom13' wx:if="{{pract_id==18}}"><image src='{{read_img}}' class='modules_red_img13' bindtap='btnmodule18'></image></view><!--*****************************组件初始化小程序19选项 ***************************--><view class='module_cont19' wx:if="{{pract_id==19}}"><image class='modules_wites_img19' src='{{wites_img}}'></image><image class='modules_me_imgs19' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><!--*****************************组件初始化小程序20回答正确 ***************************--><view class='module_cont19' wx:if="{{pract_id==20}}"><image class='modules_wites_img19' src='{{wites_img}}'></image><image class='modules_me_imgs19' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><!--*****************************组件初始化小程序21回答错误 ***************************--><view class='module_cont19' wx:if="{{pract_id==21}}"><image class='modules_wites_img19' src='{{wites_img}}'></image><image class='modules_me_imgs19' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><view class='modules_bottom21' wx:if="{{pract_id==21}}"><image src='{{read_img}}' class='modules_red_img13' bindtap='btnmodule21'></image></view><!--*****************************组件初始化小程序22继续闯关 ***************************--><view class='module_cont22' wx:if="{{pract_id==22}}"><image class='modules_wites_img19' src='{{wites_img}}'></image><image class='modules_me_imgs22' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><!--*****************************组件初始化小程序23回答错误 ***************************--><view class='module_cont21' wx:if="{{pract_id==23}}"><image class='modules_wites_img19' src='{{wites_img}}'></image><image class='modules_me_imgs21' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><!--*****************************组件初始化小程序24进阶成功 ***************************--><view class='module_cont13' wx:if="{{pract_id==24}}"><image class='modules_wites_img18' src='{{wites_img}}'></image><image class='modules_me_imgs24' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><view class='modules_bottom13' wx:if="{{pract_id==24}}"><image src='{{read_img}}' class='modules_red_img13' bindtap='btnmodule24'></image></view><!--*****************************组件初始化小程序25错题回顾 ***************************--><view class='module_cont26' wx:if="{{pract_id==26}}"><image class='modules_wites_img26' src='{{wites_img}}'></image><image class='modules_me_imgs26' src='{{less_img}}'></image><view class='module_bg'><label class='modules_text'>{{context}}</label></view></view><view class='modules_bottom26' wx:if="{{pract_id==26}}"><image src='{{read_img}}' class='modules_red_img26' bindtap='btnmodule26'></image></view></view>
</view>

//JS
var app=new getApp();
Component({properties: {//这里是遮罩层----默认显示modalHidden: {type: Boolean,value: true},modalD: {type: String,value: ""},// pract_id默认为0pract_id: {type: Number,value: 0},// 文本内容modalMsg: {type: String,value: " "},},data: {// 这里是一些组件内部数据context: "欢迎来到恋习大冒险,我是你的引路人小恋,恋习大冒险是一款通过了解彼此性格,习惯,三观来增进亲密度的游戏,需要两个人同步答题来完成,下面就让小恋先来和你互相了解一下吧。",// 指引线imgwites_img: "/image/componts/whrite.png",// 指引线imgwite_top_img: "/image/componts/wites.png",// 朕已阅imgread_img: "/image/componts/reading.png",// 飞机图片less_img: "/image/componts/less.png",top_less_img: "/image/componts/me.png",// 机器人图片img_src: "/image/common/robot.jpg",},// 组件初始化attached: function() {// 出现练习大冒险--文案if (this.data.modalD == 1) {this.setData({pract_id: 11,context: "点击【邀请好友】界面会切换到微信好友界面,选择你想要一起答题的好友就可以开始冒险啦。现在让小恋先充当一下你的好友。"})// var val = this.data.pract_id; //通过这个传递数据// var myEventDetail = {//   val: val// } // detail对象，提供给事件监听函数compontpass// this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用// console.log("子组件yaoqing", this.data.pract_id);} else if (this.data.modalD == 4) {var cardid = wx.getStorageSync("cardid");console.log("获取cardid", cardid);if (cardid==1){// 出现矜持一下this.setData({pract_id: 9,context: "这里显示的是你的初始体力。上限30点,每小时回复一点体力。每次邀请答题扣除6体力。体力值不足时可通过分享到群里来"})}else{this.setData({pract_id: 4,context: "恋习大冒险里总共有81关,每次和好友进互动答题,所回答的题数会保存在主动一里,下一次和好友答题时只需要点击好友:像发送链接就可以继续进程,不同好友所"})}} else if (this.data.modalD == 5) {// 出现无尽模式阅读this.setData({pract_id: 15,context: "每道题的阅读和答题时间都是90秒。根据每个故事的字数不同,我们给的读题时间页不相同,题目左下角会有阅读倒计时提示。若你阅读速度快, 可以!点击【跳过】提前进入答题页面。"})} else if (this.data.modalD == 8){// 催促邀请this.setData({pract_id:8,context: "点击【邀请好友】界面会切换到微信好友界面选择你想要一起答题的好友就可以开始冒险啦。现在让小恋先充当一下你的好友。"})} else if (this.data.modalD == 24){// 催促邀请this.setData({pract_id: 24,context: "成功进阶，登顶成功。"})} else if (this.data.modalD == 26){// 错题回顾this.setData({pract_id: 26,context: "无尽模式错题回顾。"})}console.log("this.data.modalD", this.data.modalD);},// 这里是所有方法methods: {// 全局跳过指导btn_next: function() {wx.setStorageSync("pract_none", true);var pract_none = wx.getStorageSync("pract_none");this.setData({modalHidden: pract_none})app.globalData.isPacart = false;wx.reLaunch({url: '/pages/index/index',})console.log("pract_none", pract_none);},// 练习大冒险父组件传值给子组件start: function(obj) {console.log("子组件接收到的值", obj);if (obj == 2) {this.setData({pract_id: 2,context: "设置面板可以设置你的性别及年龄段。"})}},// 接收到闯关须知传值--显示begin_frend: function(obj) {console.log("子组件接收到的值", obj);if (obj == 12) {this.setData({pract_id: 12,context: "注意下方的闯关须知,里面有很多关于大冒险的小穿门,让你少走弯路哦。"})}// else if(obj==16){//   this.setData({//     pract_id: 16,//     context: "注意答题倒计时,在倒计时内没有提交答案,创将失败。答题倒计时是90秒减去读题时间得出的。科学分配读题与答题时间非常重要。"//   })// }else if(obj==20){this.setData({pract_id: 20,context: "成功了. XX和你还真有默契。我们马上就要进入下一题了。"})} else if (obj == 21) {this.setData({pract_id: 21,context: "失败了. XX和你还真没有默契。。"})} else if (obj == 22){this.setData({pract_id: 22,context: "啊,失败了,不要紧,只要有体力,还能继续·闯关"})} else if (obj == 23) {this.setData({pract_id: 23,context: "o(T...r7o。失败了,体力也没有了。可以结束闯关,也可以分享到群恢复体力,继续游戏。"})}},// 选择关系结束btnmodules: function() {this.setData({pract_id: 1,context: "我们先来看一下设置面板吧"})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件", this.data.pract_id);},// 点击出现4练习大冒险btnmodule2: function() {this.setData({pract_id: 3,context: "欢迎来到恋习大冒险,我是你的引路人小恋,恋习大冒险是一款通过了解彼此性·格,习惯,三观来增进亲密度的游戏,需要两个人同步答题来完成,下面就让小恋先来和你互相了解一下吧。"})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数compontpassthis.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件", this.data.pract_id);},// 点击出现好友列表btnmodule4: function() {this.setData({pract_id: 5,context: "好友列表里显示你邀请过答题的好友,若列表为空,你可以点击游戏下方的邀请好友来邀请他们答题。当有好友希望你继续邀请他闯关时,好友列表像右上方会出现红点,点击好友头像即可至达之前所做的题目。"})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件", this.data.pract_id);},// 点击出现矜持一下子btnmodule5: function() {this.setData({pract_id: 6,context: "好友列表里显示你邀请过答题的好友,若列表为空,你可以点击游戏下方的邀请好友来邀请他们答题。当有好友希望你继续邀请他闯关时,好友列表像右上方会出现红点,点击好友头像即可至达之前所做的题目。"})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件",6);},// 点击出现催促邀请btnmodule6: function() {this.setData({pract_id: 7,context: "邀请过你的好友会显示在矜持一点里,点击好友头像下方的【催促邀请】可以催促他继·续邀请你答题"})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件", this.data.pract_id);// wx.navigateTo({//   url: '/pages/endlessMode/cards/cards',// })},// 点击出现体力值btnmodule7: function() {this.setData({pract_id: 8,context: "点击【邀请好友】界面会切换到微信好友界面选择你想要一起答题的好友就可以开始冒险啦。现在让小恋先充当一下你的好友。"})wx.navigateTo({url: '/pages/endlessMode/cards/cards',})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用},// 点击出现邀请好友闯关btnmodule8: function() {wx.redirectTo({url: '/pages/endlessMode/road/road',})this.setData({pract_id: 9,context: "这里显示的是你的初始体力。上限30点,每小时回复一点体力。每次邀请答题扣除6体力。体力值不足时可通过分享到群里来"})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件", this.data.pract_id);},//点击出现邀请好友btnmodule9: function() {this.setData({pract_id: 10,context: "点击这里的(邀请好友闯关】按钮。可邀请好友继续闯关"})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件", this.data.pract_id);},// 点击出现好友加入btnmodule12: function() {this.setData({pract_id: 13,context: "可爱的xXX已经入场了,马上就可以开始答题了。"})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件", this.data.pract_id);},// 点击出现倒计时好友进入btnmodule13: function() {this.setData({pract_id: 14,context: ". (@>v<9), 3秒倒计时..."})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件", this.data.pract_id);},// 点击出现阅读倒计时btnmodule15: function() {this.setData({pract_id: 16,context: "注意答题倒计时,在倒计时内没有提交答案,创将失败。答题倒计时是90秒减去读题时间得出的。科学分配读题与答题时间非常重要。"})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件", this.data.pract_id);},// 点击出现回顾问题btnmodule16: function() {this.setData({pract_id: 17,context: "若在答题时,忘记了故事中的某些点,可以点击向下箭头, 展示题目再次浏览。"})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件", this.data.pract_id);}, // 点击出现发言btnmodule17: function() {this.setData({pract_id: 18,context: "在答题时,如果时间充裕,还可以使用发言功能 ,和好友做简短沟通。"})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件", this.data.pract_id);},// 点击出现发言btnmodule18: function () {this.setData({pract_id: 19,context: "认真查看对比选项,选择一个你认为的最优的选择。"})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件", this.data.pract_id);},btnmodule21:function(){this.setData({pract_id: 22,context: "啊,失败了,不要紧,只要有体力,还能继续·闯关"})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件", this.data.pract_id);},btnmodule24:function(){this.setData({pract_id: 30,})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件", this.data.pract_id);},// 26btnmodule26: function () {this.setData({pract_id: 26,context: "认真查看对比选项,选择一个你认为的最优的选择。"})var val = this.data.pract_id; //通过这个传递数据var myEventDetail = {val: val} // detail对象，提供给事件监听函数this.triggerEvent('compontpass', myEventDetail) //myevent自定义名称事件，父组件中使用console.log("子组件", this.data.pract_id);}},})

//WXSS
/* 遮罩层 */.conts {position: fixed;width: 100%;height: 100%;background-color: #000;opacity: 0.8;z-index: 90;
}/* 第一级左上角新手指导 */.tab_next {position: relative;top: 75rpx;width: 100%;height: 100rpx;display: inline-block;
}.module_cont21 {position: relative;width: 100%;height: 400rpx;top: 66%;
}.module_cont21 {position: relative;width: 100%;height: 400rpx;top: 72%;
}.modules_bottom21 {position: relative;width: 100%;height: 100rpx;top: 50%;line-height: 100rpx;
}.modules_me_imgs21 {position: absolute;bottom: 87%;-moz-transform: rotate(-50deg);-webkit-transform: rotate(35deg);left: 78%;width: 85rpx;height: 41rpx;
}.head_tab {position: absolute;top: 6%;width: 100%;height: 80rpx;display: flex;line-height: 80rpx;flex-direction: row;justify-content: center;flex-wrap: wrap;/* background:rgb(191, 191, 191); *//* width:320rpx;
height:66rpx; */border-radius: 25rpx;margin: 0 auto;
}/* 顶部选项卡 *//* 主动一下 */.suc_lab {width: 145rpx;height: 54rpx;display: block;font-size: 25rpx;line-height: 54rpx;text-align: center;color: rgb(254, 254, 254);font-weight: normal;border: 2rpx rgb(254, 254, 254) solid;border-radius: 20rpx 0 0 20rpx;margin: 4rpx 1rpx 0 8rpx;background: rgb(255, 185, 215);
}.module_cont22 {position: relative;width: 100%;height: 400rpx;top: 68%;
}.modules_me_imgs22 {position: absolute;bottom: 85%;-moz-transform: rotate(-50deg);-webkit-transform: rotate(25deg);left: 78%;width: 85rpx;height: 41rpx;
}.head_tab_suc_lab {
}.head_tab_suc_labs {width: 145rpx;height: 54rpx;display: block;font-size: 25rpx;line-height: 54rpx;text-align: center;color: #fff;background: rgb(191, 191, 191);border: rgb(254, 254, 254) solid 2rpx;border-radius: 0 20rpx 20rpx 0;margin: 4rpx 8rpx 0 5rpx;
}.module_img_co {position: absolute;width: 150rpx;height: 67rpx;line-height: 67rpx;top: -63%;background-color: #999;border-bottom-right-radius: 30rpx;display: inline-block;border-top-right-radius: 30rpx;
}.module_url {width: 40rpx;height: 40rpx;border-radius: 50%;position: absolute;display: inline-block;left: 10rpx;top: 12rpx;
}.module_hed {width: 50rpx;height: 50rpx;position: absolute;display: inline-block;left: 44%;top: -138%;
}.module_name {position: absolute;right: 30rpx;color: #fff;font-size: 20rpx;
}.suc_labs {/* width: 145rpx;height: 54rpx;display: block;font-size: 25rpx;line-height: 54rpx;text-align: center;color: #fff;background: rgb(191, 191, 191);border: rgb(254, 254, 254) solid 2rpx;border-radius: 0 20rpx 20rpx 0;margin: 4rpx 8rpx 0 5rpx; */
}/* 邀请好友 */.tab_nexts {position: relative;top: 198rpx;width: 100%;height: 100rpx;display: inline-block;
}/* 跳过新手指导 */.next_imgs {position: relative;left: 5%;width: 242rpx;text-align: center;background: url("http://static.mqsocial.com/imgs/party/online/v3/common/noob/chat.png");height: 76rpx;line-height: 76rpx;background-size: cover;font-size: 30rpx;color: #fff;
}/* modules文案视图********************************************** */.module_cont {position: relative;width: 100%;height: 400rpx;top: 25%;
}.module_cont_tab1 {position: relative;width: 100%;height: 400rpx;top: 51%;
}.module_cont2 {position: relative;width: 100%;height: 400rpx;top: 22%;
}.module_cont3 {position: relative;width: 100%;height: 400rpx;top: 28%;
}.module_cont4 {position: relative;width: 100%;height: 400rpx;top: 28%;
}.module_cont5 {position: relative;width: 100%;height: 400rpx;top: 53%;
}.module_cont8 {/* position: relative;width: 100%;height: 400rpx;top: 55%; */position: relative;width: 100%;height: 400rpx;top: 25%;
}.module_cont9 {position: relative;width: 100%;height: 400rpx;top: 46%;
}.module_cont10 {position: relative;width: 100%;height: 400rpx;top: 46%;
}.module_cont11 {position: relative;width: 100%;height: 400rpx;top: 18%;
}.module_cont12 {position: relative;width: 100%;height: 400rpx;top: 28%;
}.module_cont13 {position: relative;width: 100%;height: 400rpx;top: 49%;
}.module_cont15 {position: relative;width: 100%;height: 400rpx;top: 22%;
}/* modules背景状态 */.module_bg {position: relative;left: 15%;width: 60%;text-align: center;/* display: flex; */height: 82%;line-height: 82%;background: url("http://static.mqsocial.com/imgs/party/online/v3/common/noob/con_view.png");background-size: 100% 70%;background-repeat: no-repeat;
}/* modules文案状态 */.modules_text {overflow: auto;width: 85%;height: 150rpx;text-align: left;padding: 10rpx 10rpx;position: relative;top: 7%;display: inline-block;color: #fff;font-size: 28rpx;
}/* 指导线状态 */.modules_wites_img {position: absolute;top: 58%;left: 60%;width: 158rpx;height: 102rpx;
}.modules_wites_img1 {position: absolute;top: 64%;left: 36%;width: 158rpx;height: 102rpx;
}.modules_wites_img4 {position: absolute;top: -35%;left: 59%;width: 158rpx;height: 102rpx;-webkit-transform: rotate(-85deg);
}.modules_wites_img8 {position: absolute;top: -35%;left: 38%;width: 158rpx;height: 102rpx;-webkit-transform: rotate(-85deg);
}.modules_wites_img9 {position: absolute;top: -35%;left: 37%;width: 158rpx;height: 102rpx;-webkit-transform: rotate(-85deg);
}.modules_me_imgs9 {position: absolute;bottom: 149%;-moz-transform: rotate(-50deg);-webkit-transform: rotate(30deg);left: 28%;width: 85rpx;height: 41rpx;
}.modules_wites_img12 {position: absolute;top: 72%;left: 59%;width: 158rpx;height: 102rpx;-webkit-transform: rotate(-45deg);
}.modules_wites_img13 {position: absolute;top: -39%;left: 59%;width: 158rpx;height: 102rpx;-webkit-transform: rotate(-85deg);
}.modules_wites_img18 {position: absolute;top: -39%;left: 38%;width: 158rpx;height: 102rpx;-webkit-transform: rotate(-10deg);
}.modules_me_imgs24 {position: absolute;bottom: 143%;-moz-transform: rotate(-50deg);-webkit-transform: rotate(35deg);left: 54%;width: 85rpx;height: 41rpx;
}/* 指导飞机提示状态 */.modules_me_imgs {position: absolute;bottom: 1%;-moz-transform: rotate(-50deg);-webkit-transform: rotate(-50deg);left: 74%;width: 85rpx;height: 41rpx;
}.modules_me_imgs18 {position: absolute;bottom: 143%;-moz-transform: rotate(-50deg);-webkit-transform: rotate(145deg);left: 60%;width: 85rpx;height: 41rpx;
}.modules_me_imgs1 {position: absolute;bottom: 1%;-moz-transform: rotate(-55deg);-webkit-transform: rotate(-55deg);left: 24%;width: 85rpx;height: 41rpx;
}.module_cont19 {position: relative;width: 100%;height: 400rpx;top: 13%;
}.module_cont26 {position: relative;width: 100%;height: 400rpx;top: 22%;
}.modules_wites_img26 {position: absolute;top: 68%;left: 69%;width: 158rpx;height: 102rpx;-webkit-transform: rotate(-10deg);
}.modules_me_imgs26 {position: absolute;bottom: -10%;-moz-transform: rotate(-50deg);-webkit-transform: rotate(-45deg);left: 56%;width: 85rpx;height: 41rpx;
}.modules_me_imgs4 {position: absolute;bottom: 149%;-moz-transform: rotate(-50deg);-webkit-transform: rotate(30deg);left: 52%;width: 85rpx;height: 41rpx;
}.module_cont14 {position: relative;width: 100%;height: 400rpx;top: 27%;
}.modules_wites_img14 {position: absolute;top: 69%;left: 59%;width: 158rpx;height: 102rpx;-webkit-transform: rotate(-85deg);
}.modules_me_imgs14 {position: absolute;bottom: -19%;-moz-transform: rotate(-50deg);-webkit-transform: rotate(-35deg);left: 65%;width: 85rpx;height: 41rpx;
}.modules_me_imgs8 {position: absolute;bottom: 157%;-moz-transform: rotate(-50deg);-webkit-transform: rotate(135deg);left: 39%;width: 85rpx;height: 41rpx;
}.modules_me_imgs10 {position: absolute;bottom: -16%;-moz-transform: rotate(-50deg);-webkit-transform: rotate(-40deg);left: 63%;width: 85rpx;height: 41rpx;
}.modules_me_imgs12 {position: absolute;bottom: -21%;-moz-transform: rotate(-50deg);-webkit-transform: rotate(-55deg);left: 56%;width: 85rpx;height: 41rpx;
}.modules_me_imgs13 {position: absolute;bottom: 143%;-moz-transform: rotate(-50deg);-webkit-transform: rotate(25deg);left: 50%;width: 85rpx;height: 41rpx;
}.modules_wites_img10 {position: absolute;top: 67%;left: 59%;width: 158rpx;height: 102rpx;-webkit-transform: rotate(-85deg);
}.modules_wites_img19 {position: absolute;top: 32%;left: 77%;width: 158rpx;height: 102rpx;-webkit-transform: rotate(-75deg);
}.modules_me_imgs19 {position: absolute;bottom: 19%;-moz-transform: rotate(-50deg);-webkit-transform: rotate(-45deg);left: 76%;width: 85rpx;height: 41rpx;
}/* 组件阅读视图状态 */.modules_bottom {position: relative;width: 100%;height: 100rpx;top: 28%;line-height: 100rpx;/* background-color: #fff; */
}.modules_bottom2 {position: relative;width: 100%;height: 100rpx;top: 23%;line-height: 100rpx;
}.modules_bottom12 {position: relative;width: 100%;height: 100rpx;top: 26%;line-height: 100rpx;
}.modules_bottom13 {position: relative;width: 100%;height: 100rpx;top: 43%;line-height: 100rpx;
}.modules_bottom26 {position: relative;width: 100%;height: 100rpx;top: 16%;line-height: 100rpx;
}.modules_red_img26 {position: absolute;left: 15%;width: 237rpx;height: 104rpx;
}.modules_bottom5 {position: relative;width: 100%;height: 100rpx;top: 47%;line-height: 100rpx;
}.modules_bottom8 {/* position: relative;width: 100%;height: 100rpx;top: 47%;line-height: 100rpx; */position: relative;width: 100%;height: 100rpx;top: 18%;line-height: 100rpx;
}.modules_bottom9 {position: relative;width: 100%;height: 100rpx;top: 40%;line-height: 100rpx;
}.modules_bottom10 {position: relative;width: 100%;height: 100rpx;top: 40%;line-height: 100rpx;
}/* 组件阅读按钮状态 */.modules_red_img {position: absolute;right: 12%;width: 237rpx;height: 104rpx;
}.modules_red_img12 {position: absolute;left: 15%;width: 237rpx;height: 104rpx;
}.modules_red_img13 {position: absolute;right: 15%;width: 237rpx;height: 104rpx;
}/* 卡牌 */.card_cont {position: relative;top: 20%;left: 63%;width: 30%;margin: 10rpx;height: 325rpx;background-color: #f5f5f5;background: url('http://static.mqsocial.com/imgs/party/online/v3/endlessMode/cards/blue_card.png') no-repeat;border-radius: 10rpx;background-size: cover;text-align: center;
}.card_cont_head {top: 45rpx;width: 90rpx;display: inline-block;position: relative;height: 90rpx;background: #fff;border-radius: 10rpx;
}.card_name {text-align: center;position: relative;top: 45rpx;font-size: 28rpx;
}.card_time {position: relative;top: 58rpx;width: 100%;text-align: center;font-size: 28rpx;
}.card_time text {width: 100rpx;height: 30rpx;line-height: 30rpx;background-color: #ccc;font-size: 23rpx;color: rgb(102, 102, 102);border-radius: 15rpx;padding: 5rpx 20rpx;
}.card_tow {position: relative;top: 75rpx;color: rgb(102, 102, 102);width: 100%;text-align: center;font-size: 23rpx;
}

小程序新手引导自定义组件相关推荐

小程序如何自定义组件
之前在工作中的时候遇到过了小程序自定义组件的问题,所以就想和大家分享一下小程序如何自定义组件.首先让我们来了解一下组件是什么,为什么要使用组件.组件的官方解释是说开发者可以把页面内的功能模块抽象成自定 ...
微信小程序的自定义组件（2）
文章目录 6. 组件的生命周期 7. 组件所在页面的生命周期 8. 组件插槽 9. 组件父子组件间的通信 10. 组件-behaviors 6. 组件的生命周期 created attached re ...
微信小程序（自定义组件）
文章目录自定义组件创建自定义组件引用组件组件和页面的区别自定义组件的样式样式隔离修改样式隔离选项组件的data和methods 组件的properties 数据监听使用纯数据字段提升 ...
微信小程序配置自定义组件代码按需注入 lazyCodeLoading
微信小程序配置自定义组件代码按需注入 lazyCodeLoading 官方网址在app.json最后一行加上,就可以了. "lazyCodeLoading": "re ...
小程序-实现自定义组件以及自定义组件间的通信
前言对于组件的封装,在小程序当中对于多个页面的复用有着重要的作用,小程序中注册的每个页面都是独立的页面的显示view层与逻辑层是通过data进行绑定关联,若需要更改页面中的数据,则通过setDat ...
微信小程序之自定义组件的使用、介绍、案例分享
微信小程序自定义组件介绍自定义组件发开文档类似vue或者react中的自定义组件, 小程序允许我们使用自定义组件的方式来构建页面. 自定义组件的使用 1. 创建组件(js,json,wxml,wx ...
微信小程序之自定义组件(微信小程序完结)
微信小程序自定义组件类似vue或者react中的自定义组件, 小程序允许我们使用自定义组件的方式来构建页面. 1.1 创建自定义组件类似于页面,一个自定义组件由 json, wxml, wxss ...
微信小程序中自定义组件
文章目录小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js 自定义组件 compone ...
微信小程序入门与实战之初识小程序的自定义组件
文章列表顶部轮播图跳转为每个轮播图设置点击响应函数,为其设置参数为文章的id 小程序tabBar选项卡配置基础我们在app.json配置tabBar选项卡: "tabBar": ...

小程序新手引导自定义组件

小程序新手引导自定义组件相关推荐

最新文章

热门文章