您现在的位置是:首页 >其他 >微信小程序首页、界面布局、3D轮播图效果(示例二)网站首页其他

微信小程序首页、界面布局、3D轮播图效果(示例二)

JefferyTan. 2024-07-09 12:01:03
简介微信小程序3d效果

微信小程序首页界面布局、自定义顶部状态栏、3D轮播图效果

首页布局(示例二)
使用swiper实现3D轮播图效果,自定义顶部状态栏,具体代码:
1、js代码

Page({
    /**
     * 页面的初始数据
     */
    data: {
        barHeight: 20, //  顶部状态栏高度
        navBarHeight: 66, // 顶部高度
        viewHeight: 640, // 默认高度
        current: 0,
        background: [
            'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/866dd9891938e90b52ec87522b678a28b540c9244c3b38004ca3670776237550954b02f3e73351f2a43c980075659c79?pictype=scale&from=30113&version=3.3.3.3&fname=1684975111844.jpeg&size=750',
            'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/7f881ce187cb0bb0924fc28e94b7e80895d93a035c3e997c4f25229253418c5b78546bbdff1024dee3dc2da40a7da940?pictype=scale&from=30113&version=3.3.3.3&fname=1684975459289.jpeg&size=750',
            'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/2e2fda72ef58b91dcb1bd185062479dee49a24d14302c69a9f8a5e7f1032c451b81e10203aa09efe85745f6a49722be2?pictype=scale&from=30113&version=3.3.3.3&fname=1684975468378.jpeg&size=750'
        ],
        tabList: [{
                id: '1',
                src: '../../images/rank.png',
                title: '菜单一'
            },
            {
                id: '2',
                src: '../../images/tv.png',
                title: '菜单二'
            },
            {
                id: '3',
                src: '../../images/music.png',
                title: '菜单三'
            },
            {
                id: '4',
                src: '../../images/tv.png',
                title: '菜单四'
            },
            {
                id: '4',
                src: '../../images/rank.png',
                title: '菜单四'
            }
        ],
        dataList: [{
                title: '进入我的主页,更多界面,供大家分享!',
                money: '29.99',
                number: '897',
                src: 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/2e2fda72ef58b91dcb1bd185062479dee49a24d14302c69a9f8a5e7f1032c451b81e10203aa09efe85745f6a49722be2?pictype=scale&from=30113&version=3.3.3.3&fname=1684975468378.jpeg&size=750'
            },
            {
                title: '进入我的主页,更多界面,供大家分享!',
                money: '5.99',
                number: '578',
                src: 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/2e2fda72ef58b91dcb1bd185062479dee49a24d14302c69a9f8a5e7f1032c451b81e10203aa09efe85745f6a49722be2?pictype=scale&from=30113&version=3.3.3.3&fname=1684975468378.jpeg&size=750'
            },
            {
                title: '有需要的用户,请点赞、关注加收藏哦,进入我的主页,更多界面,供大家分享!',
                money: '9.99',
                number: '78',
                src: 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/866dd9891938e90b52ec87522b678a28b540c9244c3b38004ca3670776237550954b02f3e73351f2a43c980075659c79?pictype=scale&from=30113&version=3.3.3.3&fname=1684975111844.jpeg&size=750'
            },
            {
                title: '更多小程序首页模板示例,请关注我!',
                money: '19.99',
                number: '478',
                src: 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/866dd9891938e90b52ec87522b678a28b540c9244c3b38004ca3670776237550954b02f3e73351f2a43c980075659c79?pictype=scale&from=30113&version=3.3.3.3&fname=1684975111844.jpeg&size=750'
            },
            {
                title: '进入我的主页,更多界面,供大家分享!',
                money: '39.99',
                number: '378',
                src: 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/7f881ce187cb0bb0924fc28e94b7e80895d93a035c3e997c4f25229253418c5b78546bbdff1024dee3dc2da40a7da940?pictype=scale&from=30113&version=3.3.3.3&fname=1684975459289.jpeg&size=750'
            },
        ]
    },
    bindchange(e) {
        this.setData({
            current: e.detail.current
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        var that = this;
        // 胶囊信息
        var menu = wx.getMenuButtonBoundingClientRect();
        wx.getSystemInfo({
            success(res) {
                that.setData({
                    barHeight: res.statusBarHeight,
                    navBarHeight: menu.top + menu.height + 6,
                    viewHeight: res.windowHeight
                })
            }
        })
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

2、wxml代码

<view class="bar-box" style="height: {{navBarHeight}}px;">
    <view class="level" style="margin-top: {{barHeight}}px;">
        <view class="level bar">
            <image class="top-head" src="../../images/money.jpeg" mode="widthFix"></image>
            <view class="welcome">嗨 兄嘚,欢迎使用!</view>
        </view>
    </view>
</view>
<view class="swiper-box">
    <swiper class="swiper" indicator-dots="true" indicator-active-color="#10AEFF" style="height: {{viewHeight*0.23}}px;padding-top: {{navBarHeight+10}}px;" bindchange="bindchange" autoplay="true" interval="3000" duration="500" previous-margin="20px" next-margin="20px" circular="{{true}}">
        <block wx:for="{{background}}" wx:key="*this">
            <swiper-item class="swiper-item">
                <image src="{{item}}" style="height: {{current == index ?viewHeight*0.22:viewHeight*0.18}}px;" class="item-img {{current == index ? 'active-img': ''}}"></image>
            </swiper-item>
        </block>
    </swiper>
</view>
<!-- 二级菜单 -->
<view class="level tab-box">
    <block wx:for="{{tabList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
        <view class="tab-list">
            <image class="tab-img" src="{{item.src}}" mode="widthFix"></image>
            <view class="tab-text">{{item.title}}</view>
        </view>
    </block>
</view>
<view class="step-box">
    <progress percent="66" color="#10AEFF" backgroundColor="#ecf5ff" border-radius="50" active stroke-width="10" />
    <view class="level step">
        <view>今日已运动80分钟</view>
        <view>目标120分钟</view>
    </view>
</view>
<!-- 数据列表 -->
<view class="data-box">
    <view class="level">
        <view class="line"></view>
        <view class="title">列表内容</view>
    </view>
    <view class="data-list">
        <block wx:for="{{dataList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
            <view class="col-info" style="{{index%2==0?'margin-right: 1%;':'margin-left: 1%;'}}">
                <image src="{{item.src}}" class="row-img" mode="widthFix"></image>
                <view class="row-title">{{item.title}}</view>
                <view class="row-money">
                    <text class="row-num">¥{{item.money}}</text>
                    <text class="row-buy">{{item.number}}人已购买</text>
                </view>
            </view>
        </block>
    </view>
</view>

3、wxss代码

.level {
    display: flex;
    align-items: center;
}

/* 状态栏 */
.bar-box {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

.bar-title {
    text-align: center;
    font-size: 34rpx;
    color: white;
}

.bar {
    width: 80%;
    margin-right: 30%;
    margin-top: 1.5%;
    margin-left: 20rpx;
}

.top-head {
    width: 15%;
    border-radius: 50%;
    box-shadow: 0 0 5rpx 5rpx #f1f1f1;
}

.welcome {
    margin-left: 20rpx;
    font-size: 30rpx;
    font-weight: bold;
}

/* 轮播图 */
.swiper-box {
    margin: 20rpx 0;
}

.swiper {
    width: 100%;
}

.swiper-item {
    display: flex;
    align-items: center;
}

.item-img {
    border-radius: 15rpx;
    opacity: 0.7;
}

.active-img {
    opacity: 1;
    z-index: 10;
    margin: 0 20rpx;
    transition: all .2s ease-in 0s;
}

/* 二级菜单 */
.tab-box {
    margin: 30rpx 20rpx 30rpx;
    box-shadow: 0 0 5rpx 5rpx #f1f1f1;
    padding: 6% 0;
    border-radius: 20rpx;
}

.tab-list {
    flex: 1;
    text-align: center;
    color: gray;
}

.tab-img {
    width: 50%;
}

.tab-text {
    font-size: 30rpx;
    margin: 5rpx 0;
}

.step-box {
    margin: 20rpx 20rpx 30rpx;
    box-shadow: 0 0 5rpx 5rpx #f1f1f1;
    padding: 5% 20rpx;
    border-radius: 20rpx;
}

.step {
    justify-content: space-between;
    font-size: 30rpx;
    margin-top: 20rpx;
}

/* 数据列表 */
.data-box {
    margin: 20rpx;
    position: relative;
}

.line {
    width: 10rpx;
    height: 34rpx;
    border-radius: 50rpx;
    background-color: #10AEFF;
}

.title {
    margin-left: 10rpx;
    font-size: 30rpx;
    font-weight: bold;
}

.data-list {
    margin-top: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    flex-wrap: wrap;
}

.col-info {
    width: 49%;
    background-color: #f1f1f1;
    margin-bottom: 20rpx;
    border-bottom-left-radius: 15rpx;
    border-bottom-right-radius: 15rpx;
}

.row-img {
    width: 100%;
    border-top-left-radius: 15rpx;
    border-top-right-radius: 15rpx;
}

.row-title {
    font-size: 30rpx;
    padding: 0 5rpx;
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.row-money {
    padding: 20rpx 10rpx;
    display: flex;
    justify-content: space-between;
}

.row-num {
    color: red;
    font-size: 32rpx;
}

.row-buy {
    font-size: 28rpx;
    color: gray;
}

4、json代码

{
    "usingComponents": {},
    "navigationStyle": "custom"
}

如需要下载完整版,包含监听事件、图片文件等,请前往下方链接,下载完整版,下载后直接使用微信开发者工具打开即可,下载链接为:
小程序完整版界面(示例二)

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。