微信小程序使用Vant-app组件写一个随机双色球（6个红球+1个蓝球）

1.使用Vant-Weapp需要先构建Npm,可以看一下我这篇文章https://blog.csdn.net/Acer2016/article/details/86999341

2.确认构建无误接下来看我表演show time!

以下都是先代码后图片；

1st step:json文件里面添加 piker组件

{

  "usingComponents": {

    "van-picker": "/vant/picker/index"

  }

}

2nd step:添加显示view

  <view style="width:100vw;height:40vh;" >

    <view style="margin-left:4px;">

      <view style="width:84vw;float:left;">

      <van-picker

   active-class="active"

    item-height="40"

    columns="{{ column }}"

    bind:change="onChange"

  />

    </view>

    <view style="width:14.8vw;">

  <van-picker

   active-class="active-blue"

    item-height="40"

    columns="{{ blueBalls }}"

    bind:change="onChange"

  />

</view>

</view>

</view>

3rd step：上一步代码给出了，接下来就是数据了，一个是column （红球对象数组）blueBalls （蓝球对象数组）直接复制可用

 blueballs:['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16'],

 redBalls:['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33'],

    blueBalls:[{

      values: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16'],

      className: 'column7',

      defaultIndex: 0

    }],

    column: [

      {

        values: [ { text: '01', disabled: false },{ text: '02', disabled: false },{ text: '03', disabled: false },

        { text: '04', disabled: false },{ text: '05', disabled: false },{ text: '06', disabled: false },

        { text: '07', disabled: false },{ text: '08', disabled: false },

        { text: '09', disabled: false },{ text: '10', disabled: false },{ text: '11', disabled: false },

        { text: '12', disabled: false },{ text: '13', disabled: false },{ text: '14', disabled: false },

        { text: '15', disabled: false },{ text: '16', disabled: false },{ text: '17', disabled: false },

        { text: '18', disabled: false },{ text: '19', disabled: false },{ text: '20', disabled: false },

        { text: '21', disabled: false },{ text: '22', disabled: false },{ text: '23', disabled: false },

        { text: '24', disabled: false },{ text: '25', disabled: false },{ text: '26', disabled: false },

        { text: '27', disabled: false },{ text: '28', disabled: false },{ text: '29', disabled: false },

        { text: '30', disabled: false },{ text: '31', disabled: false },{ text: '32', disabled: false },

        { text: '33', disabled: false }],

        className: 'column1',

        defaultIndex: 0

      },

      {

        values: [ { text: '01', disabled: false },{ text: '02', disabled: false },{ text: '03', disabled: false },

        { text: '04', disabled: false },{ text: '05', disabled: false },{ text: '06', disabled: false },

        { text: '07', disabled: false },{ text: '08', disabled: false },

        { text: '09', disabled: false },{ text: '10', disabled: false },{ text: '11', disabled: false },

        { text: '12', disabled: false },{ text: '13', disabled: false },{ text: '14', disabled: false },

        { text: '15', disabled: false },{ text: '16', disabled: false },{ text: '17', disabled: false },

        { text: '18', disabled: false },{ text: '19', disabled: false },{ text: '20', disabled: false },

        { text: '21', disabled: false },{ text: '22', disabled: false },{ text: '23', disabled: false },

        { text: '24', disabled: false },{ text: '25', disabled: false },{ text: '26', disabled: false },

        { text: '27', disabled: false },{ text: '28', disabled: false },{ text: '29', disabled: false },

        { text: '30', disabled: false },{ text: '31', disabled: false },{ text: '32', disabled: false },

        { text: '33', disabled: false }],

         className: 'column2',

        defaultIndex: 0

      }

      ,

      {

        values: [ { text: '01', disabled: false },{ text: '02', disabled: false },{ text: '03', disabled: false },

        { text: '04', disabled: false },{ text: '05', disabled: false },{ text: '06', disabled: false },

        { text: '07', disabled: false },{ text: '08', disabled: false },

        { text: '09', disabled: false },{ text: '10', disabled: false },{ text: '11', disabled: false },

        { text: '12', disabled: false },{ text: '13', disabled: false },{ text: '14', disabled: false },

        { text: '15', disabled: false },{ text: '16', disabled: false },{ text: '17', disabled: false },

        { text: '18', disabled: false },{ text: '19', disabled: false },{ text: '20', disabled: false },

        { text: '21', disabled: false },{ text: '22', disabled: false },{ text: '23', disabled: false },

        { text: '24', disabled: false },{ text: '25', disabled: false },{ text: '26', disabled: false },

        { text: '27', disabled: false },{ text: '28', disabled: false },{ text: '29', disabled: false },

        { text: '30', disabled: false },{ text: '31', disabled: false },{ text: '32', disabled: false },

        { text: '33', disabled: false }],

         className: 'column3',

        defaultIndex: 0

      },

      {

        values: [ { text: '01', disabled: false },{ text: '02', disabled: false },{ text: '03', disabled: false },

        { text: '04', disabled: false },{ text: '05', disabled: false },{ text: '06', disabled: false },

        { text: '07', disabled: false },{ text: '08', disabled: false },

        { text: '09', disabled: false },{ text: '10', disabled: false },{ text: '11', disabled: false },

        { text: '12', disabled: false },{ text: '13', disabled: false },{ text: '14', disabled: false },

        { text: '15', disabled: false },{ text: '16', disabled: false },{ text: '17', disabled: false },

        { text: '18', disabled: false },{ text: '19', disabled: false },{ text: '20', disabled: false },

        { text: '21', disabled: false },{ text: '22', disabled: false },{ text: '23', disabled: false },

        { text: '24', disabled: false },{ text: '25', disabled: false },{ text: '26', disabled: false },

        { text: '27', disabled: false },{ text: '28', disabled: false },{ text: '29', disabled: false },

        { text: '30', disabled: false },{ text: '31', disabled: false },{ text: '32', disabled: false },

        { text: '33', disabled: false }],

         className: 'column4',

        defaultIndex: 0

      },

      {

        values: [ { text: '01', disabled: false },{ text: '02', disabled: false },{ text: '03', disabled: false },

        { text: '04', disabled: false },{ text: '05', disabled: false },{ text: '06', disabled: false },

        { text: '07', disabled: false },{ text: '08', disabled: false },

        { text: '09', disabled: false },{ text: '10', disabled: false },{ text: '11', disabled: false },

        { text: '12', disabled: false },{ text: '13', disabled: false },{ text: '14', disabled: false },

        { text: '15', disabled: false },{ text: '16', disabled: false },{ text: '17', disabled: false },

        { text: '18', disabled: false },{ text: '19', disabled: false },{ text: '20', disabled: false },

        { text: '21', disabled: false },{ text: '22', disabled: false },{ text: '23', disabled: false },

        { text: '24', disabled: false },{ text: '25', disabled: false },{ text: '26', disabled: false },

        { text: '27', disabled: false },{ text: '28', disabled: false },{ text: '29', disabled: false },

        { text: '30', disabled: false },{ text: '31', disabled: false },{ text: '32', disabled: false },

        { text: '33', disabled: false }],

         className: 'column5',

        defaultIndex:0

      },

      {

  values: [ { text: '01', disabled: false },{ text: '02', disabled: false },{ text: '03', disabled: false },

        { text: '04', disabled: false },{ text: '05', disabled: false },{ text: '06', disabled: false },

        { text: '07', disabled: false },{ text: '08', disabled: false },

        { text: '09', disabled: false },{ text: '10', disabled: false },{ text: '11', disabled: false },

        { text: '12', disabled: false },{ text: '13', disabled: false },{ text: '14', disabled: false },

        { text: '15', disabled: false },{ text: '16', disabled: false },{ text: '17', disabled: false },

        { text: '18', disabled: false },{ text: '19', disabled: false },{ text: '20', disabled: false },

        { text: '21', disabled: false },{ text: '22', disabled: false },{ text: '23', disabled: false },

        { text: '24', disabled: false },{ text: '25', disabled: false },{ text: '26', disabled: false },

        { text: '27', disabled: false },{ text: '28', disabled: false },{ text: '29', disabled: false },

        { text: '30', disabled: false },{ text: '31', disabled: false },{ text: '32', disabled: false },

        { text: '33', disabled: false }],

         className: 'column6',

        defaultIndex:0

      }

    ]

抱歉数据有点长，只能动图了

4th step:视图和数据都有了，接下来该是逻辑代码了

  onChange(event) {

    var that = this

    var redBalls = that.data.redBalls

    var blueBalls = that.data.blueballs

    var columns=that.data.column

//获取随机一个蓝球

   var blueBall = getRandomArrayElements(blueBalls, 1) 

//随机获取6个红球

    var redBall=getRandomArrayElements(redBalls, 6) 

   var blues = that.data.blueBalls

//修改对红球象数组的字段值

    for(var i in redBall){

     var ball = redBall[i]

//红球随机数转成数字

     var num = parseInt(ball)

//修改默认显示的数字，defaultIndex不能修改

     columns[i].defaultIndex=num-1

    }

//修改对蓝球象数组的字段值

    for(var i in blueBall){

      var ball = blueBall[i]

//蓝球随机数转成数字

      var num = parseInt(ball)

//修改默认显示的数字，defaultIndex不能修改

      blues[i].defaultIndex=num-1

    }

//把值传给页面显示

    that.setData({

      column:columns,

      blueBalls:blues

    })

}

5th step:随机数方法

 

function getRandomArrayElements(arr, count) {

  var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;

  while (i-- > min) {

  index = Math.floor((i + 1) * Math.random());

  temp = shuffled[index];

  shuffled[index] = shuffled[i];

  shuffled[i] = temp;

  }

  var compare = function (x, y) {//比较函数

    if (x < y) {

        return -1;

    } else if (x > y) {

        return 1;

    } else {

        return 0;

    }

}

//这个是获取随机数之后顺序排列

  return shuffled.slice(min).sort(compare);

  }

last :以上就是实现简单的随机双色球小程序demo，如果你有更好的实现方法欢迎留言交流，下面是实现效果和已发布的线上小程序。