微信小程序之单个picker组件的使用

最新推荐文章于 2024-06-13 14:04:59 发布

Memory沙漏

最新推荐文章于 2024-06-13 14:04:59 发布

阅读量311

点赞数

分类专栏：微信小程序文章标签：总结学习

本文链接：https://blog.csdn.net/m0_45329584/article/details/96471862

版权

微信小程序专栏收录该内容

14 篇文章 4 订阅

订阅专栏

wxml：

<view  class="bottom-kuangjia">
    <picker class="p" bindchange="bindPickerChange" value="{{index}}" range="{{array}}" custom-item="请选择">
      <view class='classify-kuangjia'>
      <view>商品分类选择：</view>
      <view class="picker">{{array[index]}}</view>
      </view>
    </picker>
</view>

wxss：

/* miniprogram/pages/QQ/QQ.wxss */
.bottom-kuangjia{
  width: 100%;
  height: 60rpx;
  background-color: rgba(231, 229, 229, 0.502);
}

.classify-kuangjia{
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  height: 60rpx;
  display: flex;
  justify-content: space-around;
  background-color: forestgreen;
}
.picker{
  text-align: center;
  background-color: red;
  width: 50%;
  height: 60rpx;
}

js：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    array: ['请选择', '手机', '电脑', '办公用品', '生活用品', '其他'],
    index: 0,
  },
  //分类选择
  bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  
})