您的位置:首页 > 移动开发 > 微信开发

微信小程序 之 程序题

2021-12-25 12:50 1561 查看

目 录

  • 2、数字比较
  • 3、音乐播放器中的标签页的切换
  • 4、婚礼邀请函中的宾客信息页面
  • 1 调查问卷

    题干

    【本题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.zm}}

    2、数字比较

    题干

    【本题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 = '第二个数大'
    }
    else{
    str="两数相等"
    }
    this.setData({
    result:str
    })
    }
    })

    3、音乐播放器中的标签页的切换

    题干

    【本题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)_______="changeTab" 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.currentTarget.id
    (8)e.detail.current

    4、婚礼邀请函中的宾客信息页面

    题干

    【本题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
    (8)e.detail.value
    (9)wx.showToast
    (10)wx.showToast
  • 内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: