ウィジェットがアニメーションを使用してpicker-viewをpickerのような効果をシミュレートするpickerもappLaunch with an already exist webviewIdエラーメッセージをもたらす可能性があります

ウィジェット開発ではpickerは多くの場所で使用されますが、製品の要求を満たすことはできない可能性があります.この場合picker-viewを使用して処理できます.
jsファイルでcreateAnimationを使ってアニメーションを作成しすぎて、もちろんcssにアニメーションを加えることもできますが、jsを使います.  -.-

// pages/myTimeSelect/myTimeSelect.js
const date = new Date()
const years = []
const months = []
const days = []
var self

for (let i = 1990; i <= date.getFullYear(); i++) {
  years.push(i)
}

for (let i = 1; i <= 12; i++) {
  months.push(i)
}

for (let i = 1; i <= 31; i++) {
  days.push(i)
}
Page({

  /**
   *        
   */
  data: {
    years: years,
    year: date.getFullYear(),
    months: months,
    month: 2,
    days: days,
    day: 2,
    value: [9999, 1, 1],
    myTimeChoose: false,
    myTimeChooseViewAnimationData: {},
    myTimePickerViewMaskViewAnimationData: {},
    pickerViewHeight: 300,
    pickerViewTime: 300,
  },
  bindChange: function (e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]]
    })
  },
  chooseSezi: function (e) {
    //         
    var myTimeChooseViewAnimation = wx.createAnimation({
      //       
      duration: self.data.pickerViewTime,
      //       ，     
      timingFunction: 'ease'
    })
    //   y   ，   step()      ，     pickerView   
    myTimeChooseViewAnimation.translateY(self.data.pickerViewHeight).step()

    var myTimePickerViewMaskViewAnimation = wx.createAnimation({
      duration: self.data.pickerViewTime,
      timingFunction: 'ease'
    })
    myTimePickerViewMaskViewAnimation.opacity(0).step()


    //  setData      
    self.setData({
      //   export()      
      myTimeChooseViewAnimationData: myTimeChooseViewAnimation.export(),
      myTimePickerViewMaskViewAnimationData: myTimePickerViewMaskViewAnimation.export(),
      //   view   Wx：if
      myTimeChoose: true
    })
    //         
    myTimeChooseViewAnimation.translateY(0.2).step()
    myTimePickerViewMaskViewAnimation.opacity(1).step()
    self.setData({
      myTimeChooseViewAnimationData: myTimeChooseViewAnimation.export(),
      myTimePickerViewMaskViewAnimationData: myTimePickerViewMaskViewAnimation.export()
    })
  },
  myTimePickerViewMaskViewTap: function (e) {
    var myTimePickerViewMaskViewAnimation = wx.createAnimation({
      duration: self.data.pickerViewTime,
      timingFunction: 'ease'
    })
    myTimePickerViewMaskViewAnimation.opacity(-0.8).step()

    var myTimeChooseViewAnimation = wx.createAnimation({
      duration: self.data.pickerViewTime,
      timingFunction: 'ease'
    })
    myTimeChooseViewAnimation.translateY(0).step()
    self.setData({
      myTimeChooseViewAnimationData: myTimeChooseViewAnimation.export(),
      myTimePickerViewMaskViewAnimationData: myTimePickerViewMaskViewAnimation.export(),
      myTimeChoose: false
    })
  },
  /**
   *       --      
   */
  onLoad: function (options) {
    self = this;
  },
})

wxssファイル

     



  {{year}} {{month}} {{day}} 
  
    
      {{item}} 
    
    
      {{item}} 
    
    
      {{item}} 
    
  

css

.intro {
  text-align: center;
}

.myTimePickerViewMaskView {
  position: absolute;
  top: 0;  
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.myTimeChooseView {
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: #fff;
}

本文は小さいプログラムの1つの簡単なページで、簡単にjsアニメーションの実現QQQを理解することができます
他のウィジェットは起動時にエラーが発生しました appLaunch with an already exist webviewIdに数字を加えると、トップページにpickerがデフォルト値を設定していないためかもしれませんが、この問題のあるパートナーはvalue値を追加してみてください.