到顶到页面上的图片下拉会变大的效果

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    if (scrollView.contentOffset.y < 0) {

        _imgView.top = scrollView.contentOffset.y;

        //300imgView的高度

        _imgView.height = 300 - scrollView.contentOffset.y;

        _imgView.transform = CGAffineTransformMakeScale(_imgView.height/300, 1);

    }

}

为了将uniapp的tabBar换到部,我们需要进行以下步骤: 1.在App.vue中添加以下代码: ```vue <template> <div> <tab-bar></tab-bar> <router-view></router-view> </div> </template> <script> import tabBar from '@/components/tabBar.vue' export default { components: { tabBar } } </script> ``` 2.在tabBar.vue中添加以下代码: ```vue <template> <div class="tab-bar"> <div class="tab-bar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(index)"> <img :src="item.iconPath" :class="activeIndex === index ? 'active' : ''"> <p :class="activeIndex === index ? 'active' : ''">{{ item.text }}</p> </div> </div> </template> <script> export default { data() { return { activeIndex: 0, tabList: [ { iconPath: '/static/tabBar/home.png', selectedIconPath: '/static/tabBar/home-active.png', text: '首页', pagePath: '/pages/index/index' }, { iconPath: '/static/tabBar/mine.png', selectedIconPath: '/static/tabBar/mine-active.png', text: '我的', pagePath: '/pages/mine/mine' } ] } }, methods: { switchTab(index) { this.activeIndex = index uni.switchTab({ url: this.tabList[index].pagePath }) } } } </script> <style> .tab-bar { display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; right: 0; height: 100px; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .tab-bar-item { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%; height: 100%; } .tab-bar-item img { width: 40px; height: 40px;} .tab-bar-item p { font-size: 24px; margin-top: 10px; } .tab-bar-item img.active { width: 50px; height: 50px; } .tab-bar-item p.active { color: #007aff; } </style> ``` 3.在pages.json中添加以下代码: ```json { "globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "核心圈", "navigationBarBackgroundColor": "#009cfd", "backgroundColor": "#ff12e9" }, "tabBar": { "position": "top", "color": "#7A7E83", "selectedColor": "#007aff", "backgroundColor": "#ffffff", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/tabBar/home.png", "selectedIconPath": "static/tabBar/home-active.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "static/tabBar/mine.png", "selectedIconPath": "static/tabBar/mine-active.png" } ] } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值