注意点:
1.在开始时先用一个大的view把整个页面包裹起来
2.每个view下的子view要缩进,方便区分
3.一定要用英文定义类,不记得的单词要查!!!
a.在做弹性布局的时候要现在全局的view里边wxss定义一个 display:flex;
b.wxss颜色:
css中border旋转:
轮播图代码:
//.wxml
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
class="swiper">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
//.wxss
Page({
data: {
// motto: ‘Hello World‘,
// userInfo: {},
// hasUserInfo: false,
// canIUse: wx.canIUse(‘button.open-type.getUserInfo‘),
// canIUseGetUserProfile: false,
// canIUseOpenData: wx.canIUse(‘open-data.type.userAvatarUrl‘) && wx.canIUse(‘open-data.type.userNickName‘) // 如需尝试获取用户信息可改为false
indicatorDots:true,
autoplay:true,
interval:3000,
duration:1000,
imgUrls:[
‘https://file.youboy.com/d/154/62/29/2/445442.jpg‘,
‘https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181017%2F7d96a02ca5804ad988038d4c4337406d.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620562939&t=dcc4be59756cdc56de5ca50b2a2c5d45‘,
‘https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180525%2F14056da38cd04372b98c61a0c50d79e1.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620562939&t=dc4ce99167df1466526be623307665ba‘,
],}})