如何做一个微笑公众号推文,企业网站优化的方式,网站建设做什么好,5ucms和wordpress的区别uni-app----微信小程序锚点定位 、自动吸顶、滚动自动选择对应的锚点#xff08;点击tab跳转对应的元素位置#xff09;
html代码部分 重点是给元素加入【 :id“‘item’ item.id”】 view classradiusz bg-white pt-[30rpx] z-[999]u-tabs:list点击tab跳转对应的元素位置
html代码部分 重点是给元素加入【 :id“‘item’ item.id”】 view classradiusz bg-white pt-[30rpx] z-[999]u-tabs:listlist:currentcurrentchangetabChangebg-colortransparent:active-colormainColor:bar-width90font-size24:gutter26/u-tabs/viewviewclasspx-[20rpx] py-[20rpx] w-full bg-white mb-[30rpx] box-borderv-foritem in list:keyitem.idview classtext-center :iditem item.idtext classpr-[10rpx]———/text{{ item.name}}text classpl-[10rpx]———/text/viewview classmt-[40rpx]u-parse :htmlitem.content/u-parse/viewview classmt-[40rpx]apply-btn :customClasscustomClass btnText加盟申请/apply-btn/view/view2.JS代码部分
import { getCurrentInstance } from vue
const { proxy } getCurrentInstance() as any
const customClass ref(m-auto) //按钮样式
const current ref(0) // tab默认索引/*** description: 滚动到对应的位置 uni-app锚点定位 、自动吸顶、滚动自动选择对应的锚点* param {*} indextab选中的索引* return {*}*/
const pageScroll (index: number) {nextTick(() {const id list.value[index].idconst query proxy.createSelectorQuery()query.select(#item id).boundingClientRect((data: Recordstring, any) {const query1 proxy.createSelectorQuery() //需要定义一个新的query1.select(.boxz).boundingClientRect((res: Recordstring, any) {const scrollTop data.top - res.top // 获取差值const skewY 80 // 偏移高度// 页面开始进行滚动到目标位置uni.pageScrollTo({scrollTop: scrollTop 0 ? scrollTop - skewY : scrollTop skewY,duration: 300,complete: function () {console.log(滚动完成)}})}).exec()}).exec()})
}/*** description: 点击tab选项* param {*} index 选中的索引* return {*}*/
const tabChange (index: number) {current.value indexpageScroll(index)
}
