微信小程序开发实训记录(一)

本文分享了在紧迫的时间限制下,快速开发小程序首页的经验,包括轮播图、横向布局和平滑过渡效果的实现,以及如何通过代码进行页面跳转和数据交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

学校的压迫下,三天开发一个小程序。作品做的不太好,但是对于基本界面的编写及数据交互算是有了一些了解,做一下记录。

一、 首页的实现

首页
首页主要解决了轮播图、横向平分布局、以及页面跳转相关问题。

二、代码实现介绍

wxml部分

  <!--index.wxml-->
<view class="top" >  <swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">    <block wx:for="{{imgUrls}}"  >      <swiper-item>        <image src="{{item}}" class="slide-image" />      </swiper-item>    </block>  </swiper></view><view class="button_list">  <view class="AQ" >    <image src="../img/qa.png" bindtap="passQuery" data-index="1" ></image>  </view>  <view class="AQ">    <image src="../img/shi.png" bindtap="passQuery" data-index="2"></image>  </view>  <view class="AQ">    <image src="../img/ge.png" bindtap="passQuery" data-index="3"></image>  </view></view><view class="button_list">  <view class="AQ">    小听问答  </view>  <view class="AQ">    <label>诗情乐意</label>  </view>  <view class="AQ">    <label>藏乐阁</label>  </view></view><view style="margin-left:3px;font-size:35rpx">每日推荐</view><view class="music_list">  <view class="ml" >    <image src="http://47.100.192.102/f1.png" bindtap="tomusic" data-index="1" ></image>  </view>  <view class="ml">    <image src="http://47.100.192.102/f2.png" bindtap="tomusic" data-index="2"></image>  </view>  <view class="ml">    <image src="http://47.100.192.102/f3.png" bindtap="tomusic" data-index="3"></image>  </view></view><view class="music_list">  <view class="ml" >    <image src="http://47.100.192.102/f4.png" bindtap="tomusic" data-index="4" ></image>  </view>  <view class="ml">    <image src="http://47.100.192.102/f5.png" bindtap="tomusic" data-index="5"></image>  </view>  <view class="ml">    <image src="http://47.100.192.102/f6.png" bindtap="tomusic" data-index="6"></image>  </view></view>
<!--index.wxml-->





js部分,主要和data相关


//index.js//获取应用实例const app = getApp()
Page({  data: {     imgUrls: [      '../img/1.jpg',      '../img/2.jpg',      '../img/3.jpg',      '../img/4.jpg',      '../img/5.jpg',      '../img/6.jpg'    ],      indicatorDots: true,    autoplay: true,    interval: 5000,    duration: 1000  },
  passQuery: function (e) {
    // 传递的参数
    let query = e.currentTarget.dataset['index'];    if(query==1){      wx.navigateTo({        url: '../anwser/anwser',      })    }else if(query==2){      wx.navigateTo({        url: '../poem/poem',      })    }else{      wx.navigateTo({        url: '../lib/lib',      })    }
  },  tomusic:function(e){    // 全局定义    let query = e.currentTarget.dataset['index'];    app.data.id = query;    wx.navigateTo({      url: '../listen/listen',    })    
  }
})

wxss 部分

/**index.wxss**/

.top{    width: 100%;  height:400rpx; }.top image{  width: 100%;  height: 100%;}.button_list{  display: flex;  align-items: center;  width: 100%;  flex-direction: row;  padding-top: 5rpx;
}
.button_list image{    width: 120rpx;  height: 120rpx;  vertical-align:top;}
.AQ{  width: 120rpx;  height: 120rpx;  text-align: center;  flex:1;  font-size: 35rpx;}.music_list{  display: flex;  align-items: center;  width: 100%;  flex-direction: row;  margin-top: 10rpx;}.music_list image{    width: 90%;  height: 220rpx;  vertical-align:top;}.ml{  width: 90%;  height: 220rpx;  text-align: center;  flex:1;}
/**index.wxss**/

需要注意的点

首页实现中,下面的每日推荐涉及到跳转后传值。采用了全局变量的改变来实现这一点。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值