花乐鲜购小程序

使用微信小程序开发的一个鲜花销售小程序 

 

 

 

首页部分源码

 //新品上架
   newpin:[{
     cp_id:0,
     cp_mingcheng:"桃红雪山玫瑰",
     jiage:99,
     cp_tupian:"https://i.loli.net/2021/05/14/6YBDdEqzvken2RK.jpg"
   },{
    cp_id:1,
    cp_mingcheng:"香槟玫瑰百合",
    jiage:139,
    cp_tupian:"https://i.loli.net/2021/05/14/AaQTgKWyCLqr9oG.jpg"
  },{
    cp_id:2,
    cp_mingcheng:"粉色康乃馨",
    jiage:179,
    cp_tupian:"https://i.loli.net/2021/05/14/umT16axSJhKHOeG.jpg"
  },{
    cp_id:3,
    cp_mingcheng:"蓝绣球向日葵",
    jiage:229,
    cp_tupian:"https://i.loli.net/2021/05/14/T6L3JbnyEQkl15e.jpg"
  }],
  //猜你喜欢
  guesslike:[{
      like_id:0,
      likeimg:"https://i.loli.net/2021/05/14/HOiVc5ujp2gr3EQ.jpg",
      likename:"妈妈辛苦了",
      jieshao:"19枝粉色康乃馨搭配白桔梗、白色满天星、纽扣菊、白色烟花扶郎、小叶尤加利叶",
      paynum:9979,
      likejiage:149
    },{
    like_id:1,
    likeimg:"https://i.loli.net/2021/05/14/6p3znkMStuwfAyY.jpg",
    likename:"向阳的温暖",
    jieshao:"2枝向日葵3枝白荔枝玫瑰搭配香槟翠菊、黄色多头玫瑰白桔梗、尤加利叶",
    paynum:6979,
    likejiage:99
  },{
    like_id:2,
    likeimg:"https://i.loli.net/2021/05/14/hVjolpLXKWSFiCB.jpg",
    likename:"爱意连绵",
    jieshao:"33枝卡罗拉玫瑰搭配白色满天星",
    paynum:3979,
    likejiage:199
  }]
  
    
  },
    // 关闭公告
    closeNotices:function(options){
      this.setData({
        isOpen:!this.data.isOpen
      })
},
  //  监听动画结束
  animationend(){
console.log("")
},
// 改变点击状态

onShow() {
this.initAnimation(this.data.text)
},
onHide() {
this.destroyTimer()
this.setData({
 timer: null
})
},
onUnload() {
this.destroyTimer()
this.setData({
 timer: null
})
},
destroyTimer() {
if (this.data.timer) {
 clearTimeout(this.data.timer);
}
},
/**
* 开启公告字幕滚动动画
*/
initAnimation(texts) {
let that = this

// 获取文本节点信息
let query = wx.createSelectorQuery()
query.select('.content-box').boundingClientRect()
query.select('#text').boundingClientRect()
query.exec((rect) => {
 that.setData({
  textWidth: rect[1].width,
  duration:rect[1].width/16*400
 }, () => {
  this.startAnimation()
 })
})
// 创建动画对象
this.data.animation = wx.createAnimation({
 duration: this.data.duration,
 timingFunction: 'linear'  
})

},
// 定时器动画
startAnimation() {
//reset重复滚动
this.data.animation.option.transition.duration = 0
const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step({duration:0})
this.setData({
 animationData: resetAnimation.export()
});
// 让文字滚动起来
const animationData = this.data.animation.translateX(-this.data.textWid