塔罗牌微信小程序源码

记录一下开发塔罗牌微信小程序整个过程:
1.塔罗牌运势模块:
整个此模块包含4个主页面: 首页 选牌页面 订单页面 详情页面
a:首页
整个首页相对来说还是比较简单的,样式实现就不说了比较简单,首页主要有一个滚动事件,就是滚动页面时,如果滚动条位置超开始按钮的高度时,自动显示底部按钮,相反如果页面上显示了顶部按钮,则自动隐藏底部按钮
这里用小程序的钩子函数onPageScroll实现

import { getCurrentInstance } from 'vue'
import { ref } from 'vue'

export default function () {
  const showBottomBtn = ref(false)

  onPageScroll(() => {
    const instance = getCurrentInstance()
    const query = uni.createSelectorQuery().in(instance)
    query
      .select('.content-wrap')
      .boundingClientRect(data => {
        const { top } = data
        if (top <= 0) {
          showBottomBtn.value = true
        } else {
          showBottomBtn.value = false
        }
      })
      .exec()
  })

  return {
    showBottomBtn,
  }
}

b. 选牌页面
整个塔罗牌总共22张牌,塔罗运势需要用户随机选3张牌
选牌区代码:

<!-- 选牌区 -->  
<view class="card_list">
  <view
    class="move_card0"
    v-for="item in 22"
    :class="`move_card${item}`"
    :style="{
      transform: `rotate(${-52.5 + item * 5}deg)`,
      animationDelay: `${item * 0.05}s`,
      display: selectCard.includes(item) ? 'none' : 'blcok',
    }"
    @click="handleSelect($event, item)"
    :key="item"
  >
    <image mode="widthFix" src="" />
  </view>
</view>

主要css:
.card_list > view {
  position: absolute;
  width: 130rpx;
  height: auto;
  /* -webkit-transform-origin: 1.2rem -5.4rem; */
  transform-origin: 72rpx -256rpx;
  top: 0;
  left: 50%;
  margin-left: -72rpx;
  z-index: 100;
  -webkit-animation-name: card;
  animation-name: card;
  animation-duration: 0.1s;
  -webkit-animation-duration: 0.1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  opacity: 0;
}

js部分:
/**
 *
 * @param {*} size 总共几张牌
 * @endPosition 接牌区最终位置
 * @returns
 */
export default function (size, endPosition) {
  // 当前第几张牌(接牌区)
  const cardNum = ref(-1)
  // 当前选中牌(用于选牌后,隐藏当前牌)
  const selectCard = reactive([])
  // 接牌区初始位置(当前点击位置)
  let position = reactive(Array(size).fill({ x: 0, y: '130rpx' }))
  // 接牌区整体样式
  const cardStyle = computed(() => {
    return index => {
      const { x: left, y: top } = position[index] || {}
      return {
        top,
        left,
        transform: 'translateZ(100px)',
        'z-index': cardNum.value >= index ? 999 : 1,
        opacity: cardNum.value >= index ? 1 : 0,
      }
    }
  })
  // 接牌区文字样式
  const cardTextStyle = computed(() => {
    return index => {
      return {
        opacity: cardNum.value >= index ? 1 : 0,
      }
    }
  })
  // 动画
  let animationData = reactive(Array(size))
  // 动画结束后显示牌正面
  // 选牌结束后显示提示文字
  const show = reactive({
    ...
  })
  // 选牌
  const handleSelect = async (e, index) => {
    ...

  // 重新选牌
  const handleRetry = () => {
    const [{ route }] = [...getCurrentPages()].reverse()
    const type = uni.getSystemInfoSync().uniPlatform
    const surl = type == 'mp-kuaishou' ? '' : '/'
    uni.redirectTo({
      url: surl + route,
    })
  }

  onLoad(() => {
    setTimeout(() => {
      show.triangle = true
      setTimeout(() => {
        show.hint1 = true
        setTimeout(() => {
          show.hint2 = true
        }, 500)
      }, 400)
    }, 300)
  })

  return {
    cardStyle,
    cardNum,
    animationData,
    selectCard,
    handleSelect,
    handleRetry,
    cardTextStyle,
    show,
  }
}

c.订单页
此页面css比较简单,在此不列html部分代码

js部分:
export default function () {
  const minute = ref(60) // 分钟
  const second = ref(0) // 秒
  let timer = null

  // 倒计时方法
  const countdown = () => {
    ...
    timer = setTimeout(() => {
      countdown()
    }, 1000)
  }

  // 选中牌面信息
  const carinfo = ref(getApp().globalData.cardinfo)
  // 评论区上下轮播
  const top = ref(0)
  ...
  
  return {
    minute,
    second,
    carinfo,
    top,
  }
}

d.详情页

联系开发作者QQ409602826一起学习交流

微信扫码体验: