分类 JavaScript 下的文章

1、在所建项目的根目录下初始化包配置管理文件

npm init -y

2、在根目录下执行

npm i @vant/weapp -S --production

3、在微信IDE的 工具-->选中构建npm,如下图

wwwc.png

4、配合vant官网上“快速上手”一起使用

https://vant-contrib.gitee.io/vant-weapp/#/quickstart

这里的标签div可换成任意html标签

<div class="layui-badge layui-bg-blue" data-title="团购信息" data-area="90%,85%" ew-event="open" data-type="2" data-content="http://www.baidu.com.com">团体</div>

左侧为 WEB 事件,右侧为 uni-app 对应事件

{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap', //推荐使用longpress代替
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
}

JS代码

Page({
  data: {
    weekInfo: []
  },

     // 处理未来七天的函数
     dealTime (num) {     // num:未来天数
      var time = new Date()     // 获取当前时间日期
      var date = new Date(time.setDate(time.getDate() + num)).getDate()  //这里先获取日期,在按需求设置日期,最后获取需要的
      var year = time.getFullYear()  //获取年份
      var month = time.getMonth() + 1   // 获取月份
      var day = time.getDay()   //  获取星期
      switch (day) {             //  格式化
        case 0: day = "日"
          break
        case 1: day = "一"
          break
        case 2: day = "二"
          break
        case 3: day = "三"
          break
        case 4: day = "四"
          break
        case 5: day = "五"
          break
        case 6: day = "六"
          break
      }
      var obj = {
        // date: date,
        day: month + '.' + date,
        // month: month,
        week:day,
        date:year+'-'+month + '-' + date
      }
      return obj      // 返回对象
    },
 /**
   * 生命周期函数--监听页面加载
   */
  onLoad (options) {
    var arr = []
    for (let i = 0; i < 7; i++) {
      arr.push(this.dealTime(i))
    }
    // arr[0].day = '今天'
    this.setData({
      weekInfo: arr            // 赋值给data
    },()=>{
      console.log(this.data.aWeek)
    })
    //api_data(this);  请求接口
  },

  DatetabSelect(e) {
    console.log(e)
  }
});


页面wxml

<scroll-view scroll-x class=" nav bg-white" scroll-with-animation scroll-left="{{scrollLeft}}" style="padding-left:8rpx">
  <view class="cu-item date-item {{index==DateTabCur?' Datecur':''}}" wx:for="{{weekInfo}}" wx:key="*this" bindtap="DatetabSelect" data-id="{{index}}" style="padding: 0px 8rpx;">
    <view> {{item.day}}</view>
    <view class="weeks">{{item.week}}</view>
  </view>
</scroll-view>

局部WXSS

.nav .date-item {
  height: 166rpx;
  text-align: center;
  color: #9a9a9a;
  border: none;
  line-height: 78rpx;
}

.date-item .weeks {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  background: #333333;
  text-align: center;
  line-height: 70rpx;
  color: white;
  /* margin-bottom: 5rpx; */
}

.nav .date-item.Datecur .weeks {
  border: 4rpx solid red;
  color: #333333;
  background:white;
}


演示效果

pictrue-demo.png

转载自:https://blog.csdn.net/weixin_40762926/article/details/121469758