mpvue实现类似通讯录锚点

本文主要是介绍mpvue实现类似通讯录锚点，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<template> <!-- <div :class="questionLess['questionPage-box']"><div :class="questionLess['questionPage-bg']"><div v-if="typeName==='门店收入'"><div :class="questionLess['questionPage-bg-title']">门店收入</div><div :style="{margin:'20rpx 0'}">以下数据均为固化数据：</div><div :style="{marginBottom:'20rpx'}">门店收入：过夜审时门店发生的消费总和，包括房费，会员卡，餐饮，小商品等科目。</div><div :style="{marginBottom:'20rpx'}">间夜数：过夜审时产生的间夜数，包括时租房和正常入住。</div><div :style="{marginBottom:'20rpx'}">出租率=间夜数/客房数*100%，客房数包含维修房和自用房。</div><div :style="{marginBottom:'20rpx'}">平均房价=总房费/间夜数。</div><div>注：以上数据，来源自“JY01 酒店综合统计日报表(固化)”。</div></div><div v-if="typeName==='门店收入明细'"><div :class="questionLess['questionPage-bg-title']">门店收入明细</div><div :style="{margin:'20rpx 0'}">以下数据均为固化数据：</div><div :style="{marginBottom:'20rpx'}">饼图：当天发生消费的一级科目和对应的金额，按金额从大到小顺时针排序。</div><div>注：以上数据，来源自“JY01 酒店综合统计日报表(固化)”。</div></div><div v-if="typeName==='数据维度day'"><div :class="questionLess['questionPage-bg-title']">数据维度</div><div :style="{margin:'20rpx 0'}">以下数据均为固化数据</div><div> <span :style="{width:'5px',height:'10px',verticalAlign:'middle',display:'inline-block',marginRight:'3px',background:'black'}"></span><span :style="{verticalAlign:'middle',display:'inline-block'}">总房费</span></div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">房型：各房型产生的房费及排名，如果房型数量大于5，取前5个产生房费最多的房型；如果房型数量小于等于5，则显示产生房费的全部房型。查询1家门店时，有房型排行；查询超过1家门店时，无房型数据。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">客源：各客源产生的房费以及排名，不产生房费的客源不显示。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">渠道：各渠道产生的房费以及排名，不产生房费的渠道不显示。</div><div :style="{marginBottom:'3px'}"> <span :style="{width:'5px',height:'10px',verticalAlign:'middle',display:'inline-block',marginRight:'3px',background:'black'}"></span><span :style="{verticalAlign:'middle',display:'inline-block'}">“间夜数”，“出租率”，“平均房价”同“总房费”</span></div><div>注：以上数据，来源自“JY01 酒店综合统计日报表(固化)”。</div></div><div v-if="typeName==='数据维度month'"><div :class="questionLess['questionPage-bg-title']">数据维度</div><div :style="{margin:'20rpx 0'}">以下数据均为固化数据</div><div> <span :style="{width:'5px',height:'10px',verticalAlign:'middle',display:'inline-block',marginRight:'3px',background:'black'}"></span><span :style="{verticalAlign:'middle',display:'inline-block'}">总房费</span></div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">当月趋势：当月每天总房费的趋势图，如果当月营业日已全部发生，则显示当月房费趋势；如果当月营业日未全部发生，则显示近30天的房费趋势。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">房型：各房型产生的房费及排名，如果房型数量大于5，取前5个产生房费最多的房型；如果房型数量小于等于5，则显示产生房费的全部房型。查询1家门店时，有房型排行；查询超过1家门店时，无房型数据。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">客源：各客源产生的房费以及排名，不产生房费的客源不显示。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">渠道：各渠道产生的房费以及排名，不产生房费的渠道不显示。</div><div :style="{marginBottom:'3px'}"> <span :style="{width:'5px',height:'10px',verticalAlign:'middle',display:'inline-block',marginRight:'3px',background:'black'}"></span><span :style="{verticalAlign:'middle',display:'inline-block'}">“间夜数”，“出租率”，“平均房价”同“总房费”</span></div><div>注：以上数据，来源自“JY03 酒店综合统计月报表(固化)”。</div></div><div v-if="typeName==='数据维度year'"><div :class="questionLess['questionPage-bg-title']">数据维度</div><div :style="{margin:'20rpx 0'}">以下数据均为固化数据</div><div> <span :style="{width:'5px',height:'10px',verticalAlign:'middle',display:'inline-block',marginRight:'3px',background:'black'}"></span><span :style="{verticalAlign:'middle',display:'inline-block'}">总房费</span></div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">当年趋势：当年每月总房费的趋势图，如果当年已全部发生，则显示12个月房费趋势；如果当年未全部发生，则显示已发生月份的房费趋势。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">房型：各房型产生的房费及排名，如果房型数量大于5，取前5个产生房费最多的房型；如果房型数量小于等于5，则显示产生房费的全部房型。查询1家门店时，有房型排行；查询超过1家门店时，无房型数据。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">客源：各客源产生的房费以及排名，不产生房费的客源不显示。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">渠道：各渠道产生的房费以及排名，不产生房费的渠道不显示。</div><div :style="{marginBottom:'3px'}"> <span :style="{width:'5px',height:'10px',verticalAlign:'middle',display:'inline-block',marginRight:'3px',background:'black'}"></span><span :style="{verticalAlign:'middle',display:'inline-block'}">“间夜数”，“出租率”，“平均房价”同“总房费”</span></div><div>注：以上数据，来源自“JY03 酒店综合统计月报表(固化)”。</div></div><div v-if="typeName==='客房指标'"><div :class="questionLess['questionPage-bg-title']">客房指标</div><div :style="{margin:'20rpx 0'}">以下数据均为固化数据：</div><div :style="{marginBottom:'20rpx'}">总房量：过夜审时的物理客房数。</div><div :style="{marginBottom:'20rpx'}">过夜房：过夜审时的在住客房数。</div><div :style="{marginBottom:'20rpx'}">维修房：过夜审时的维修客房数。</div><div :style="{marginBottom:'20rpx'}">过夜房出租率=过夜房/总房量*100%，非出租率。</div><div>注：以上数据，来源自“JY01 酒店综合统计日报表(固化)”。</div></div><div v-if="typeName==='工作台数据'"><div :class="questionLess['questionPage-bg-title']">工作台数据</div><div :style="{margin:'20rpx 0'}">以下数据均为实时数据</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">总客房：同PMS实时房态下全部客房数，包含维修房，可用房。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">可订房数=总客房数-维修房-今日预抵客房数-实时在住+今日预离。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">今日预离=今日应离未离的客房数。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">今日预抵=今日应到未到的预定客房数。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">自用房：同PMS工作台，自用房数的合计。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">维修房：同PMS实时房态，“按房态”的“维修”。</div></div><div v-if="typeName==='实时看板客房数'"><div :class="questionLess['questionPage-bg-title']">客房数</div><div :style="{margin:'20rpx 0'}">以下数据均为实时数据</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">实时在住客房数：同PMS工作台，在住-合计。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">预计出租客房数=实时在住客房数+今日预抵客房数-自用房-今日预离客房数。</div></div><div v-if="typeName==='实时看板出租率'"><div :class="questionLess['questionPage-bg-title']">出租率</div><div :style="{margin:'20rpx 0'}">以下数据均为实时数据</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">实时出租率=（实时在住客房数-自用房）/（总客房-维修房-自用房）*100%。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">预计出租率=（实时在住客房数+今日预抵客房数-自用房-今日预离客房数）/（总客房-维修房-自用房）*100%。</div></div><div v-if="typeName==='实时看板总房费'"><div :class="questionLess['questionPage-bg-title']">总房费</div><div :style="{margin:'20rpx 0'}">以下数据均为实时数据</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">实时总房费=（实时在住客房-今日预离房）房价累计，只看同住主单房价。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">预计总房费=实时房费收入+今日预抵客房房价累计。</div></div><div v-if="typeName==='实时看板平均房价'"><div :class="questionLess['questionPage-bg-title']">平均房价</div><div :style="{margin:'20rpx 0'}">以下数据均为实时数据</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">实时平均房价=实时房费/（实时在住-今日预离房-自用房）。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">预计平均房价=预计总房费/（实时在住客房数+今日预抵客房数-自用房-今日预离客房数）。</div></div><div :style="{textAlign:'right'}"><vanButton round :class="questionLess['questionPage-button']" type="danger" @click="closePopup">关闭</vanButton></div></div></div> --><div :style="{position:'relative',height:'100%'}"><div :class="questionLess['questionPage-tab']"><div :class="[questionLess['questionPage-tab-item'],index===0?'active':'']" @click="tab(0)">门店收入</div><div :class="[questionLess['questionPage-tab-item'],index===1?'active':'']" @click="tab(1)">门店收入明细</div><div :class="[questionLess['questionPage-tab-item'],index===2?'active':'']" @click="tab(2)">数据维度</div><div :class="[questionLess['questionPage-tab-item'],index===3?'active':'']" @click="tab(3)">客房指标</div></div><div class="questionPage-scroll"><scroll-view :style="{height:'100%'}" scroll-y="true" :scroll-top="scrollTop" @scroll="scrollContent"><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细0</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据：</div><div><div>饼图：当天发生消费的一级科目和对应的金额，按金额从大到小顺时针排序。</div><div>注：以上数据，来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细1</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据：</div><div><div>饼图：当天发生消费的一级科目和对应的金额，按金额从大到小顺时针排序。</div><div>注：以上数据，来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细2</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据：</div><div><div>饼图：当天发生消费的一级科目和对应的金额，按金额从大到小顺时针排序。</div><div>注：以上数据，来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细3</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据：</div><div><div>饼图：当天发生消费的一级科目和对应的金额，按金额从大到小顺时针排序。</div><div>注：以上数据，来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细4</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据：</div><div><div>饼图：当天发生消费的一级科目和对应的金额，按金额从大到小顺时针排序。</div><div>注：以上数据，来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细4</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据：</div><div><div>饼图：当天发生消费的一级科目和对应的金额，按金额从大到小顺时针排序。</div><div>注：以上数据，来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细4</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据：</div><div><div>饼图：当天发生消费的一级科目和对应的金额，按金额从大到小顺时针排序。</div><div>注：以上数据，来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细4</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据：</div><div><div>饼图：当天发生消费的一级科目和对应的金额，按金额从大到小顺时针排序。</div><div>注：以上数据，来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl></scroll-view></div></div>
</template>
<script>
import {navigateBack} from '../../utils/commUtil'
import questionLess from './questionPage.less'
export default {data () {return {questionLess,showCatergory: '',typeName: '',dataArr: '',index: 0,scrollTop: 0}},methods: {closePopup () {this.show = falsenavigateBack()wx.showTabBar()},scrollContent (e) {this.dataArr.forEach((ele, index) => {if (ele.top <= e.target.scrollTop && e.target.scrollTop <= ele.top + ele.height) {this.index = indexconsole.log(this.index)}})},tab (x) {this.scrollTop = this.dataArr[x].top}},onLoad: function (options) {console.log('options', options)this.typeName = options.typeName},onShow () {const query = wx.createSelectorQuery()let self = thisquery.selectAll('.questionPage-part').boundingClientRect(function (res) {res.forEach(ele => {ele.top = ele.top - 64})self.dataArr = res}).exec()}
}
</script>

这篇关于mpvue实现类似通讯录锚点的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---