实现效果：默认选中的都是中间的选项，当改变某个选择器的选中项，将选中的值打印到log。

index.hml

<div class="container1"> /* 容器div */
   /* 在容器组件div内部嵌套一个容器组件div */
    <div class="container2" > /* 将属性class的值设置为container2，以通过index.css中名为container2的类选择器设置嵌套组件div的样式，同时对于外部的组件div将其属性class的值设置为container1 */

        <picker-view class="pv1"range="{{picker1range}}" selected="1" onchange="changeAction1"></picker-view> /* 在两个选择器组件pickerview中各添加一个selected属性,并将值设置为1,预览效果：默认选中的都是中间的选项；再添加一个onchange属性，设置为两个函数名changeAction1、changeAction2 */
        /* 在组件image的上方添加一个组件text */
        <text class="txt" >
            分 /* 文本设置为分 */
        </text>

        /* 把组件image转移到上一步嵌套组件的div中 */

        <image src="/common/huxixunlian.png" class="img" ></image> /* 添加一个组件image,以显示logo的图片,指定logo图片在项目中的位置;将属性class的值设置为img以通过index.css中名为img的类选择器设置组件image的样式 */

        <picker-view class="pv2"range="{{picker2range}}" selected="1" onchange="changeAction2"></picker-view>

        /* 在组件的上下方各添加一个选择器组件pickerview ,将属性class的值分别设置为pv1和pv2;将属性range的值分别设置为picker1range和picker2range*/

    </div>

    <input type="button" value="点我" class="btn" onclick="clickAction"/> /* 将属性type的值设置为button，以显示一个按钮，将属性value的值设为点我，以设置按钮上设置的文本，将属性class的值设为btn，以通过index.css中名为btn的类选择器，设置按钮的样式 ;再添加一个属性onclick，点击后触发按钮事件*
</div>

当改变某个选择器的选中项，触发onchange事件，为了能获取到选中项的值，可以在触发onchange事件的时候让系统自动调用自定义的函数，将选择项的值传递给形参。

index.js

import router from '@system.router' // 从system的routrt中导入router
export default {
    data: {
        picker1range:["1","2","3"],
        picker2range:["较慢","舒缓","较快"]
    }, // 注意 ：data 右花括号和clickAction 之间必须加上,
    clickAction() { //定义一个名为clickaction的函数
        router.replace({
            uri: 'pages/train/train'
        }); // 添加一条页面跳转语句
    },

// 添加一个自定义函数changeAction1，响应左边选择器的onchange事件，同时定义一个名为pv的形参
    changeAction1(pv) {
        console.log("左边的选中项：" + pv.newValue); // 通过pv.newValue获取选中的值
    },

//同理，添加 changeAction2，响应右边选择器的onchange事件
    changeAction2(pv) {
        console.log("右边的选中项：" + pv.newValue); 
    },

// 实现页面的四个生命周期事件
    onInit() {
        console.log("主页面的onInit()被调用"); //在回调函数中打印log
    },

    onReady() {
        console.log("主页面的onReady()被调用"); //在回调函数中打印log
    },

    onShow() {
        console.log("主页面的onShow()被调用"); //在回调函数中打印log
    },

    onDestroy() {
        console.log("主页面的onDestroy()被调用"); //在回调函数中打印log
    }
}