【本题10分】在小程序项目中利用index.js中给出的数据,补充完整index.wxml中的代码,渲染出如下图所示的效果。
注意:标清填空编号,按照编号顺序将自己填写的代码写到答题框中。
index.js中Page()函数代码如下:
Page({ data:{ name:'王五', gender:[ {name:'男',value:'0',checked:false}, {name:'女',value:'1',checked:true} ], sports:[ {zm:'跑步',value:'pb',checked:false}, {zm:'打篮球',value:'dlq',checked:true}, {zm:'踢足球',value:'tzq',checked:false}, {zm:'跳绳',value:'ts',checked:true} ] } })
index.wxss页面样式代码如下:
view{margin:30rpx;} input{border: 1px solid #ccc;margin-top: 10px;height: 80rpx;} button{background-color: blue;}
index.wxml页面结构代码如下:
<view class="container"> <form> <view class="nn"> <text>姓名:</text> <input type="text" name="name" ____(1)_______ /> </view> <view class="ss"> <text>性别:</text> <______(2)_______name="gender"> <label _____(3)______ wx:key="value"> <radio value="{{item.value}}" _____(4)_______ />______(5)______ </label> </_____(6)_______> </view> <view class="zz"> <text>喜欢的运动:</text> <checkbox-group name="sports"> <label _____(7)_______ _____(8)______="*this"> <checkbox value="{{item.value}}" ______(9)_________ />_____(10)______ </label> </checkbox-group> </view> </form> </view>
(1)value = "{{name}}" (2)radio-group (3)wx:for="{{gender}}" (4)checked = "{{item.checked}}" (5){{item.name}} (6)redio-group (7)wx:for="{{sport}} (8)wx:key (9)checked="{{item.checked}}" (10){{item.name}}
【本题12分】在小程序项目的的index页面中实现两个数的比较如下图1所示,在不改变index.wxml页面结构的前提下,完成对应 的index.js实现如下功能:
在页面本文框中输入两个数,单击“比较”按钮,在下方显示如图2所示信息(比较结果可以是:第1个数大、第2个数大、两个 数相等)。
注意:将index.js文件的Page()函数中自己编写的代码粘贴到答题框中。
index.wxml页面结构代码如下:
<view> <text>请输入第1个数值:</text> <input id="num1" type="number" bindinput="numValue" /> </view> <view> <text>请输入第2个数值:</text> <input id="num2" type="number" bindinput="numValue" /> </view> <button bindtap="compare">比较</button> <view > <text>比较结果:{{result}}</text> </view>
index.wxss页面样式代码如下:
view,button{margin:30rpx;} view.title{text-align: center;color:red;font-size: 50rpx;} input{border: 1px solid #ccc;margin-top: 10px;height: 80rpx;} button{background-color: blue;}
//index.js const app = getApp() // 获取应用实例 Page({ /** * 页面初始数据 */ data:{ num1:0, num2:0, result:"" }, /** * 事件处理函数 */ numValue:function(e){ this[e.currentTarget.id] = Number(e.detail.value) }, compare:function(e){ var str = '两数相等' if(this.num1 > this.num2){ str = '第一个数大' } else if(this.num1 < this.num2){ str = '第二个数大' } })
【本题8分】小程序项目的的index页面运行后效果如下图所示,补充完整index.wxml和index.js中的代码,完成实现如下功能:
(1)单击页面上面标签上的文字,文字颜色变为黄色,线条变为红的,同时下面的显示相应的颜色块;
(2)在页面颜色块上滑动时,标签上相应文字变为黄色,线条变为红的。
注意:标清填空编号,按照编号顺序将自己填写的代码写到答题框中。
index.wxml页面结构代码如下:
<view class="tab"> <view class="tab-item {{item==0?'active':''}}" bindtap="changeItem" id="0">粉色</view> <view class="tab-item _____(1)________ bindtap="changeItem" ____(2)______>绿色</view> <view class="tab-item ______(3)_______ bindtap="changeItem" _____(4)________>蓝色</view> </view> <swiper current="___(5)____" _____(6)_______="changTab" circular="true"> <swiper-item> <view style="background:pink;"></view> </swiper-item> <swiper-item> <view style="background:green;"></view> </swiper-item> <swiper-item> <view style="background:blue;"></view> </swiper-item> </swiper>
index.wxss页面样式代码如下:
.tab {display: flex;background-color:#000;color:#fff;} .tab-item {flex: 1;font-size: 10pt;text-align: center;line-height: 72rpx;border-bottom: 6rpx solid #eee;} .active{color: yellow;border-bottom-color:red;} swiper{height:400rpx;} swiper view{height:100%;}
index.js代码如下:
Page({ data:{ item:0 }, changeItem(e){ this.setData({ item:_____(7)________ }) }, changeTab(e){ this.setData({ item:____(8)______ }) } })
(1){{item==1?'active':''}} (2)id="1" (3){{item==2?'active':''}} (4)id="2" (5){{item}} (6)bindchange (7)e.target.dataset.item (8)e.detail.current
【本题10分】小程序项目的的index页面运行后效果如下图1所示,补充完整index.wxml和index.js中的代码,完成实现如下功
能:
(1)页面中参加婚礼人数利用picker组件可以进行人数的选择如图2;
(2)单击“提交”按钮,当姓名不为空且手机号长度为13位是显示提交成功,否则显示信息错误提示如图3。
注意:标清填空编号,按照编号顺序将自己填写的代码写到答题框中。
index.wxml页面结构代码如下:
<form _______(1)_____="formSubmit"> <view class="content"> <view> <input name="xm" type="text" placeholder="输入您的姓名:" placeholder-class="phcolor" /> </view> <view> <input name="phone" type="text" placeholder="输入您的手机号:" placeholder-class="phcolor" /> </view> <view> <picker name="num" _____(2)_______="pickerChange" range="_____(3)_______"> 参加婚礼人数:_______(4)__________ </picker> </view> <button form-type="____(5)_____" >提交</button> </view> </form>
index.wxss页面样式代码如下:
page{background-color: #eee;} .content{width: 80vw;margin:10vw;} .content>view{font-size:2.8vh;border:1px solid #ff4c91;border-radius:10rpx;padding:1.5vh 40rpx;margin- bottom:1.5vh;color: #ff4c91;} .content button{font-size:3vh;line-height: 5.5vh;background-color: #ff4c91;color:#fff;} .content picker{padding: 0.7vh 0;} .content .phcolor{color: #ff4c91;}
index.js代码如下:
Page({ data: { picker: { arr: ['1', '2', '3', '4', '5', '6'], index: 0 } }, pickerChange: function(e) { this.setData({ '_____(6)_______': e.detail.value }) }, formSubmit: function(e) { var name = ______(7)_________ var phone = ______(8)___________ if(name&&phone.length==13){ ______(9)________({ title: '提交成功', icon: 'success', duration: 1500 }) } else{ ______(10)_______({ title: '信息错误', icon: 'error', duration: 1500 }) } } })
(1)bindsubmit (2)bindchange (3){{picker.arr}} (4){{picker.arr[picker.index]}} (5)submit (6)picker.index (7)e.detail.value.name (8)e.detail.value.phone (9)wx.showToast (10)wx.showToast