塔罗牌微信小程序源码

记录一下开发塔罗牌微信小程序整个过程:
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 } = dataif (top <= 0) {showBottomBtn.value = true} else {showBottomBtn.value = false}}).exec()})return {showBottomBtn,}
}

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

<!-- 选牌区 -->  
<view class="card_list"><viewclass="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().uniPlatformconst surl = type == 'mp-kuaishou' ? '' : '/'uni.redirectTo({url: surl + route,})}onLoad(() => {setTimeout(() => {show.triangle = truesetTimeout(() => {show.hint1 = truesetTimeout(() => {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,}
}