index.wxml

<view class="all-view">
    <!-- 轮播图 -->
    <swiper indicator-dots autoplay interval="2000" class="banner">
        <swiper-item>
            <image src="http://p1.music.126.net/I2V0rEQYvDAIc2PsjclYUw==/109951166578448904.jpg?imageView&quality=89"></image>
        </swiper-item>
        <swiper-item>
            <image src="http://p1.music.126.net/IXz9Qkl_0T7DKfreA2OCvA==/109951166578480498.jpg?imageView&quality=89"></image>
        </swiper-item>
        <swiper-item>
            <image src="http://p1.music.126.net/vP7rApPU_Ya44506pAIcjw==/109951166578250511.jpg?imageView&quality=89"></image>
        </swiper-item>
    </swiper>

    <!-- 导航图标 -->
    <scroll-view class="navi-icon" enable-flex scroll-x>
        <view>
            <view>
                <view class="iconfont icon-rili1 navi-font"></view>
            </view>
            <text>每日推荐</text>
        </view>

        <view>
            <view>
                <view class="iconfont icon-shouyinji-xian navi-font"></view>
            </view>
            <text>私人FM</text>
        </view>

        <view>
            <view>
                <view class="iconfont icon-gedan navi-font"></view>
            </view>
            <text>歌单</text>
        </view>

        <view>
            <view>
                <view class="iconfont icon-paihangbanggequ navi-font"></view>
            </view>
            <text>排行榜</text>
        </view>

        <view>
            <view>
                <view class="iconfont icon-zhibo navi-font"></view>
            </view>
            <text>直播</text>
        </view>
        <view>
            <view>
                <view class="iconfont icon-zhuanjiguangpan navi-font"></view>
            </view>
            <text>数字专辑</text>
        </view>
        <view>
            <view>
                <view class="iconfont icon-shoucang navi-font"></view>
            </view>
            <text>歌房</text>
        </view>
        <view>
            <view>
                <view class="iconfont icon-shoubing navi-font"></view>
            </view>
            <text>游戏专区</text>
        </view>
    </scroll-view>

    <view class="line"></view>
    
    <view class="navi-item">
        <view>推荐歌单</view>
        <view>
            更多
            <text class="iconfont icon-youjiantou more-yjt"></text>
        </view>
    </view>


    <scroll-view class="navi-music" enable-flex scroll-x>
        <view>
            <image src="http://p3.music.126.net/JKhJj8e-_PjL9ilHqdaPmQ==/109951166442699958.jpg?param=200y200"></image>
            <text>下雨听的歌曲</text>
        </view>

        <view>
            <image src="http://p3.music.126.net/PrmUbWZ-eqdJyzXEbIEKfw==/109951166190213890.jpg?param=200y200"></image>
            <text>上厕所听的歌曲（DJ）</text>
        </view>

        <view>
            <image src="http://p3.music.126.net/tF7-MspmLRWZJHvkqg9owQ==/109951166547412619.jpg?param=200y200"></image>
            <text>睡觉听的歌曲</text>
        </view>

        <view>
            <image src="http://p4.music.126.net/TnKAVjPAhad40wlRUBI8UA==/109951166402750089.jpg?param=200y200"></image>
            <text>运动听的歌曲（摇滚）</text>
        </view>

        <view>
            <image src="http://p2.music.126.net/pS99RaAj1cJSwtcwwPL84A==/109951166521728995.jpg?param=140y140"></image>
            <text>一人一首经典老歌</text>
        </view>
        <view>
            <image src="http://p3.music.126.net/pVvV_8uElrMaqNv16F1XxQ==/109951165545356370.jpg?param=200y200"></image>
            <text>一个水瓶座的民谣歌单</text>
        </view>
    </scroll-view>
</view>

index.wxss

/* 取消滚动条 */
::-webkit-scrollbar {
    display: none;
}
/* pages/index/index.wxss */
.all-view{
    width: 100%;
    height: 100%;
    background-color: #ecedef;
}
.banner{
    width: 90%;
    margin: 0 auto;
}
.banner image{
    width: 100%;
    height: inherit;
    border-radius: 20rpx;
}

/* 导航图标 */
.navi-icon{
    height: 170rpx;
    display: flex;
    margin-top: 30rpx;
}
.navi-icon view{
    width: 140rpx;
    text-align: center;
}
.navi-icon view view view{
    width: 100rpx;
    height: 100rpx;
    background-color: #fff1f1;
    border-radius: 50%;
    line-height: 100rpx;
    margin-left: 20rpx;
}
.navi-font{
    font-size: 60rpx;
    color: #fe3a3b;
}
.navi-icon text{
    font-size: 25rpx;
}

.line{
    width: 95%;
    height: 2rpx;
    background-color: #e4dede;
    margin: 20rpx auto;
}
.navi-item{
    height: 55rpx;
}
.navi-item view:nth-child(1){
    float: left;
    margin-left: 30rpx;
    font-size: 35rpx;
    font-weight: bolder;
}
.navi-item view:nth-child(2){
    width: 83rpx;
    height: 40rpx;
    border-radius: 30rpx;
    line-height: 40rpx;
    float: right;
    font-size: 25rpx;
    padding-left: 15rpx;
    margin-right: 30rpx;
    border: 1rpx solid #cccccc;
}
/* 更多的右箭头 */
.more-yjt{
    float: right;
}

.navi-music{
    display: flex;
    margin-top: 15rpx;
}
.navi-music view{
    margin-right: 15rpx;
}
.navi-music view:nth-child(1){
    margin-left: 15rpx;
}
.navi-music image{
    width: 190rpx;
    height: 190rpx;
    border-radius: 12rpx;
}
.navi-music text{
    font-size: 24rpx;
    margin-left: 15rpx;
    
}

index.json

{
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "navigationBarTitleText": "首页"
}

index.js

// pages/index/index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        location:"五角大楼（幸福路12号）"
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // 修改数据
        this.setData({
            location:'信息工程大学（幸福路）'
        });

        //和vue有却别 中间有个data
        console.log(this.data.location);
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

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

    },

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

    },

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

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        console.log("用户下拉页面了");
        console.log("跳转到抢红包页面");
    },

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

    },

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

    }
})