滑块视图容器-轮播图

这里需要AppID,把index.wxml中的都删掉,index.wxss中的也都删掉,app.wxss中的也都删掉,只留下注释内容的第一行,index.js中page都删掉

文档中,视图容器下面的swiper,找到示例代码,复制到index.wxml中,把page的这一段代码复制到index.js中,运行一下,可以看到下面有按钮和拉杆,这个不需要就在index.wxml中把下面的标签删掉

在index.wxml中发现每个属性等于两个大括号框起来的值,indicator autoplay interval duration ,这个值是从js中传进来的,进入js,发现indicator默认等于false,如果改为true的话,发现三个点出来了,autoplay也改为true,测试是否会播,但是又发现不是无缝滚动的,没有占据整个宽度,进入wxml,把width和height删掉,,进入index.wxss中,

image{

    width:100%;

    height:300rpx;

}

运行,发现图片已经充满整个屏幕,但是高度判断不出来,就改变一下数值测试,发现没有变化,想是不是image外面的盒子不够宽,不够高呢,把swiper复制到image后面,用逗号隔开,发现还是没有变化,再找上一级,复制,逗号隔开

image,swiper-item,swiper{

width:100%;

height:300rpx;

}

测试发现可以了,现在需要在手机端看一下正常不正常

需要上传一下,点一下上传,确定,版本号一般写v1.0,以v开头,项目备注:自己命名,中间点击预览按钮

凡是通过两个大括号形式传进来的,全部要写在js的data标签里面,只要不超出data的范围,顺序是无所谓的,如果属性是indicator-color,那么这两个大括号里面的变量名称就不能用中间是杠的形式写,应该用驼峰法,值为数字和bool值不需要加双引号,字符串才需要加双引号

你可能感兴趣的:(滑块视图容器-轮播图)